MenuItem's focus doesn't work at all in the latest version

[RajatSatashiya]

Package: @headlessui/react Version: v2.2.0, v2.1.10 For example: Chrome

Code (same as you have provided in your documentation)

import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
import clsx from 'clsx'
import { Fragment } from 'react'

const links = [
  { href: '/settings', label: 'Settings' },
  { href: '/support', label: 'Support' },
  { href: '/license', label: 'License' },
]

function Example() {
  return (
    <Menu>
      <MenuButton as={Fragment}>
        {({ active }) => <button className={clsx(active && 'bg-blue-200')}>My account</button>}
      </MenuButton>
      <MenuItems anchor="bottom">
        {links.map((link) => (
          <MenuItem key={link.href} as={Fragment}>
            {({ focus }) => (
              <a className={clsx('block', focus && 'bg-blue-100')} href={link.href}>
                {link.label}
              </a>
            )}
          </MenuItem>
        ))}
      </MenuItems>
    </Menu>
  )
}

I hover over one of the links and nothing happens, the blue color doesn't get activated. The focus is not giving any value.