Any react component as a control

[mr-scrpt]

Hi all, I want to make a dropdown component that will accept any, custom react component or string as a control. For example I want to pass my custom button

          <DropDown list={list}>
            <Button>{t('open')}</Button>
          </DropDown>

And here is the code for the DropDown component

export const DropDown = memo((props: DropDownProps) => {
  const { className, list, children } = props

  const clsDropDown = classNames(cls.dropDown, [className], {})
  return (
    <div className={clsDropDown}>
      <Menu>
        <Menu.Button as={Fragment}>{children}</Menu.Button>
        <Menu.Items>
          {list.map((item) => (
            /* Use the `active` state to conditionally style the active item. */
            <Menu.Item key={item.id} as={Fragment}>
              {item.Component}
            </Menu.Item>
          ))}
        </Menu.Items>
      </Menu>
    </div>
  )
})

But in this case I get an error in the browser
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
This is what the code for my custom button looks like right now

import { Ref, forwardRef, memo } from 'react'
import { Icon } from 'shared/component/Icon'
import { classNames } from 'shared/lib/classNames'

import { ButtonIconPositionEnum } from '../type/buttonIconPosition.enum'
import { ButtonProps } from '../type/props.type'
import { ButtonShapeEnum } from '../type/shape.enum'
import { ButtonSizeEnum } from '../type/size.enum'
import { ButtonViewEnum } from '../type/view.enum'
import cls from './style/Button.module.scss'

export const Button = forwardRef(
  (props: ButtonProps, ref: Ref<HTMLButtonElement> | null) => {
    const {
      className,
      classIcon,
      children,
      view = ButtonViewEnum.PRIMARY,
      size = ButtonSizeEnum.L,
      shape = ButtonShapeEnum.MAIN,
      icon,
      iconPosition = ButtonIconPositionEnum.LEFT,
      disabled,
      ...rest
    } = props

    const clsButton = classNames(cls.button, [className], {
      [cls.view_primary]: view === ButtonViewEnum.PRIMARY,

      [cls.view_secondary]: view === ButtonViewEnum.SECONDARY,
      [cls.view_tertiary]: view === ButtonViewEnum.TERTIARY,
      [cls.view_transparent]:
        view ===
        (ButtonViewEnum.TRANSPARENT || ButtonViewEnum.TRANSPARENT_INVERTED),
      [cls.view_transparent_inverted]:
        view === ButtonViewEnum.TRANSPARENT_INVERTED,

      [cls.size_l]: size === ButtonSizeEnum.L,
      [cls.size_m]: size === ButtonSizeEnum.M,
      [cls.size_s]: size === ButtonSizeEnum.S,
      [cls.size_xl]: size === ButtonSizeEnum.XL,

      [cls.shape_main]: shape === ButtonShapeEnum.MAIN,
      [cls.shape_next]: shape === ButtonShapeEnum.NEXT,
      [cls.shape_flat]: shape === ButtonShapeEnum.FLAT,

      [cls.state_disabled]: disabled,
    })

    const clsText = classNames(cls.text)

    const clsIconButton = classNames(cls.icon, [classIcon])

    return (
      <button
        type="button"
        className={clsButton}
        disabled={disabled}
        ref={ref}
        {...rest}
      >
        {icon && iconPosition === ButtonIconPositionEnum.LEFT && (
          <Icon className={clsIconButton} icon={icon} />
        )}
        {children && <span className={clsText}>{children}</span>}
        {icon && iconPosition === ButtonIconPositionEnum.RIGHT && (
          <Icon className={clsIconButton} icon={icon} />
        )}
      </button>
    )
  }
)

I additionally used forwardRef but that didn't help
I would like to make a universal dropdown and pass different components to it, can you please tell me how to do it correctly?