Cannot style the active menu item on Next.js

[njncalub]

Hi, everyone.

I'm using next@11.0.0 and I want to style the menu item when I hover over it.

However, when I use next/link, the active check is not handled.

// Working

<Menu.Item>
  {({ active }) => {
    return (
      <a
        href="/"
        className={
          active ? classes.linkActive : classes.linkInactive
        }
      >
        Working
      </a>
    );
  }}
</Menu.Item>

// Not working

<Menu.Item>
  {({ active }) => {
    return (
      <Link href="/">
        <a
          className={
            active ? classes.linkActive : classes.linkInactive
          }
        >
          Not working
        </a>
      </Link>
    );
  }}
</Menu.Item>

// Not working

{links.map((link) => {
  return (
    <Menu.Item key={link.href}>
      {({ active }) => {
        return (
          <Link href={link.href}>
            <a
              className={
                active
                  ? classes.linkActive
                  : classes.linkInactive
              }
            >
              Also not working for {link.name}
            </a>
          </Link>
        );
      }}
    </Menu.Item>
  );
})}

Is active only processed once when I pass the value to Link?

[njncalub]

Refined my search filters and found this: #145.

I've updated nikosolihin's comment for TypeScript and it's now working.

interface LinkWrapperProps {
  active: boolean;
  href: string;
  children?: React.ReactNode;
}

const LinkWrapper = React.forwardRef<HTMLAnchorElement, LinkWrapperProps>(
  ({ href, active, children, ...props }, ref) => {
    return (
      <Link href={href}>
        <a
          ref={ref}
          className={active ? classes.linkActive : classes.linkInactive}
          {...props}
        >
          {children}
        </a>
      </Link>
    );
  }
);

LinkWrapper.displayName = 'LinkWrapper';

{links.map((link) => {
  return (
    <Menu.Item key={link.href}>
      {({ active }) => {
        return (
          <LinkWrapper href={link.href} active={active}>
            {link.name}
          </LinkWrapper>
        );
      }}
    </Menu.Item>
  );
})}

Thanks!