How to add styling to an active link in NextJS

NextLink.tsx

import React, { forwardRef } from "react";
import Link, { LinkProps } from "next/link";
import { useRouter } from "next/router";

interface Props extends React.PropsWithChildren<LinkProps> {
  href: string;
  children?: string | JSX.Element;
  className?: string;
  activeClassName?: string;
  exactActiveClassName?: string;
  style?: React.CSSProperties;
  activeStyle?: React.CSSProperties;
  exactActiveStyle?: React.CSSProperties;
}

function classNames(classes: (string | undefined | null)[]) {
  return classes.filter(Boolean).join(" ");
}

export const MyLink = forwardRef((props: Props, ref: any) => {
  let {
    href,
    children,
    className,
    activeClassName,
    exactActiveClassName,
    style,
    activeStyle,
    exactActiveStyle,
    ...rest
  } = props;
  const router = useRouter();
  return (
    <Link href={href}>
      <span
        ref={ref}
        {...rest}
        className={classNames([
          className,
          router.pathname.includes(href as string) ? activeClassName : null,
          router.pathname === href ? exactActiveClassName : null,
        ])}
        style={
          router.pathname.includes(href as string)
            ? { ...style, ...activeStyle }
            : router.pathname === href
            ? { ...style, ...activeStyle, ...exactActiveStyle }
            : { ...style }
        }
      >
        {children}
      </span>
    </Link>
  );
});

MyLink.displayName = "MyLink";