Badge inside Select not fully on the right side

[uigywnkiub]

UPDATE: if i choose shape='rectangle' it work as normal. But it strange because it is still circle.
I am sorry that I does not opening issue bug, it get to much time.

const userCategories = [
{
    "subject": "General",
    "items": [
      { "emoji": "🤔", "name": "Unknown" },
      { "emoji": "🛠️", "name": "Repairs" },
      { "emoji": "📦", "name": "Other" }
    ]
  }
]

    <Badge
                content=''
                shape='circle'
                color='danger'
                variant='solid'
                size='sm'
                placement='top-right'
                isInvisible={isCategoryExist}
              >
                <Select
                  isDisabled={isLoading}
                  name='category'
                  label='Select a category'
                  className='w-56'
                  items={userCategories || DEFAULT_CATEGORIES}
                  selectedKeys={category}
                  defaultSelectedKeys={category}
                  onSelectionChange={setCategory}
                >
                  {(userCategories || DEFAULT_CATEGORIES).map(
                    (category, idx, arr) => (
                      <SelectSection
                        key={category.subject}
                        showDivider={idx !== arr.length - 1}
                        title={category.subject}
                      >
                        {category.items.map((item) => (
                          <SelectItem key={item.name}>
                            {`${item.emoji} ${item.name}`}
                          </SelectItem>
                        ))}
                      </SelectSection>
                    ),
                  )}
                </Select>
              </Badge>