NextJS 13.4.1 & RadixUi Navigation menu 1.1.3 - Hydration issue

[TimotejKovacka]

I've been working on a NextJS project with Radix Ui components. I've tried to build a navigation menu with client side routing with NextJS component, but it has been causing hydration issues and I do not know what I'm doing wrong. If any of you might have an idea I would greatly appriciate it.

Here is the component code

const NavigationMenuBar: React.FC = () => (
  <NavigationMenu.Root className="text-white relative hidden lg:block">
    <NavigationMenu.List className="flex">
      {MenuItemData.map((item, i) => (
        <MenuItem key={i} data={item} />
      ))}
      {SingleItemData.map((item, i) => (
        <SingleItemLink key={i} {...item} />
      ))}
    </NavigationMenu.List>
  </NavigationMenu.Root>
);

const MenuItem = ({ data }: any) => {
  return (
    <NavigationMenu.Item>
      <NavigationMenu.Trigger className="text-white hover:bg-primary-light focus:shadow-violet7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
        {data.title}{" "}
        <ChevronDownIcon
          aria-hidden
          className="text-violet10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
        />
      </NavigationMenu.Trigger>
      <NavigationMenu.Content>
        <ul>
          {data.links.map((link: any, index: number) => (
            <ListItem {...link} />
          ))}
        </ul>
      </NavigationMenu.Content>
    </NavigationMenu.Item>
  );
};

const ListItem = ({ href, title, description }: any) => {
  const isActive = usePathname() === href;
  return (
    <li>
      <NavigationMenu.Link
        className={classNames("...", { active: isActive })}
        asChild
      >
        <NextLink href={href}>
          <>
            <div className="...">{title}</div>
            <p className="...">{description}</p>
          </>
        </NextLink>
      </NavigationMenu.Link>
    </li>
  );
};

const SingleItemLink = ({ href, title }: any) => {
  const isActive = usePathname() === href;
  return (
    <NavigationMenu.Item>
      <NavigationMenu.Link
        className={classNames("...", { active: isActive })}
        asChild
      >
        <NextLink href={href}>{title}</NextLink>
      </NavigationMenu.Link>
    </NavigationMenu.Item>
  );
};

export default NavigationMenuBar;

Error that is thrown in development server:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <a>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
div
a
Call Stack
throwOnHydrationMismatch
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (6779:0)
tryToClaimNextHydratableInstance
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (6818:0)
updateHostComponent$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (15516:0)
beginWork$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (17351:0)
HTMLUnknownElement.callCallback
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (19437:0)
Object.invokeGuardedCallbackImpl
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (19486:0)
invokeGuardedCallback
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (19561:0)
beginWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25672:0)
performUnitOfWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24501:0)
workLoopConcurrent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24487:0)
renderRootConcurrent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24443:0)
performConcurrentWorkOnRoot
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23321:0)
workLoop
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (261:0)
flushWork
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (230:0)
MessagePort.performWorkUntilDeadline
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (537:0)

Unhandled Runtime Error
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Call Stack
updateHostRoot
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (15463:0)
beginWork$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (17334:0)
beginWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25650:0)
performUnitOfWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24501:0)
workLoopSync
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24217:0)
renderRootSync
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24182:0)
recoverFromConcurrentError
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23428:0)
performConcurrentWorkOnRoot
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23334:0)
workLoop
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (261:0)
flushWork
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (230:0)
MessagePort.performWorkUntilDeadline
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (537:0)

The project is using NextJS 13.4.1 and "@radix-ui/react-navigation-menu": "^1.1.3"