using useMenuButtonContext inside Dropdown still throws error

[Mnigos]

🐛 Bug report

Current Behavior

useMenuButtonContext must be rendered inside of a Dropdown component.

Expected behavior

should render component correctly.

Reproducible example

FormDropdown.tsx

export interface FormDropdownProps {
  items: JSX.Element[]
}

export function FormDropdown({
  items,
}: FormDropdownProps) {
  const { isExpanded } = useMenuButtonContext()

  const [activeItem, setActiveItem] = useState(items[0])

  function handleChangeActiveItem(item: JSX.Element) {
    setActiveItem(item)
  }

  return (
    <div>
      <Menu>
        <MenuButton>
          {activeItem}

          <Icon
            name={IconName.ChevronUp24}
            className={clsx('h-[9px] w-3.5', isExpanded && 'rotate-180')}
          />
        </MenuButton>

        <MenuList
          className="absolute mt-2 flex w-full flex-col gap-1"
          portal={false}
        >
          {items.map((item, index) => (
            <MenuItem
              key={index}
              onSelect={() => handleChangeActiveItem(item)}
            >
              {item}
            </MenuItem>
          ))}
        </MenuList>
      </Menu>
    </div>
  )
}

App.tsx

export function App() {
  return (
    <Dropdown>
        <FormDropdown items={[]} />
   </Dropdown>
  )
}

Suggested solution(s)

Additional context

Your environment

Software	Name(s)	Version
Reach Package	menu-button	^0.18.0
React		^17.0.2
Browser	Chrome
Assistive tech
Node		v16.13.1
npm/yarn	yarn	1.22.19
Operating System	MacOS Sierra

[Mnigos]

Solution is to use Menu component instead of Dropdown. Please update error to return valid message