MenuItem focus with custom component wrapping NextJS <Link>

[therealgilles]

I have custom component that wraps the NextJS <Link> component:

const AnyLink = forwardRef<HTMLAnchorElement, AnyLinkType>(({ children, ...props }, ref) => {
   const { ..., ...rest } = props
   ...
   return (
    <Link {...rest} ref={ref}>
      {children}
    </Link>
  )
})

that I am trying to use with <MenuItem> and I cannot get the focus state to work:

                      <MenuItem>
                        {({ focus }) => (
                          <AnyLink href={href} onClick={onClick}>
                            my link
                          </AnyLink>
                        )}
                      </MenuItem>

Any advice?

[therealgilles]

Ah never mind, I had a css prop interfering with the className prop.