Badge not work inside DropdownItem

[uigywnkiub]

Error: Unknown element <[object Object]> in collection.

<DropdownSection title='Actions' showDivider>
                <DropdownItem
                  key={DROPDOWN_KEY.COPY}
                  startContent={
                    <HoverableElement
                      element={<PiCopy size={DEFAULT_ICON_SIZE} />}
                      hoveredElement={<PiCopyFill size={DEFAULT_ICON_SIZE} />}
                    />
                  }
                  description='Copy transaction data'
                >
                  Copy
                </DropdownItem>
                <Badge
                  content=''
                  shape='rectangle'
                  color='danger'
                  variant='solid'
                  size='sm'
                  isDot
                  placement='top-right'
                  // classNames={{
                  //   base: 'w-full',
                  //   badge: 'right-1',
                  // }}
                  // isInvisible={!hasCategoryChanged}
                >
                  <DropdownItem
                    key={DROPDOWN_KEY.EDIT}
                    startContent={
                      <HoverableElement
                        element={<PiNotePencil size={DEFAULT_ICON_SIZE} />}
                        hoveredElement={
                          <PiNotePencilFill size={DEFAULT_ICON_SIZE} />
                        }
                      />
                    }
                    description='Edit transaction details'
                  >
                    Edit
                  </DropdownItem>
                </Badge>
              </DropdownSection>

[wingkwong]

Dropdown is a collection-based component and DropdownSection is a group of DropdownItem. You cannot add other components other than DropdownItem.

[FTCHD]

@wingkwong @jrgarciadev why was this closed?

do you guys not see an issue with this? it's standard to have a dropdown where some items need "attention"