Why is class at DOM not same with className at component

I pass className props to the child component, but sometimes in the production stage className for link active is not actually write to the DOM element, like this:

• Child component (Link) (catch props className active link from parent)

• Child component (Link) in DOM (client does not write class if link active)

My Code like this

• Navbar

// Navbar.tsx
import classnames from 'classnames';
import { useRouter } from 'next/router';
...

const Navbar = () => {
  const router = useRouter();

  const navigations = [
    {
      href: '/',
      label: 'Home'
    },
    {
      href: '/profile',
      label: 'Profile'
    }
  ];

  return (
    ...
          {navigations.map((nav) => (
            <NavLink key={nav.label} href={nav.href} isActive={router.asPath === nav.href}>
              {nav.label}
            </NavLink>
          ))}
    ...
  );
};

export default Navbar;

• Parent component

// NavLink.tsx

import classnames from 'classnames';

import Link from '@/components/elements/Link';
import styles from '@/components/parts/Navbar/styles.module.scss';

import type { NavLinkProps } from './types';

const NavLink = ({ children, href, isActive }: NavLinkProps) => (
  <Link
    href={href}
    className={classnames(styles.navbar__link, {
      [styles.navbar__link_active]: isActive
    })}
  >
    {children}
  </Link>
);

export default NavLink;

• Child component

// Link.tsx

import dynamic from 'next/dynamic';

import type { LinkProps } from './types';

const NextLink = dynamic(() => import('next/link'));

const Link = ({ children, href, target, isExternal, className, label, role }: LinkProps) => {
  if (isExternal) {
    return (
      <a
        href={href}
        target={target ?? '_blank'}
        rel="noopener noreferrer"
        className={className}
        aria-label={label}
        role={role}
      >
        {children}
      </a>
    );
  }

  return (
    <NextLink href={href}>
      <a target={target ?? '_self'} className={className} aria-label={label} role={role}>
        {children}
      </a>
    </NextLink>
  );
};

export default Link;