Next.js ActiveLink component with TypeScript

import { useRouter } from 'next/router';
import PropTypes from 'prop-types';
import Link from 'next/link';
import { FC } from 'react';

export function classNames(...classes: string[]): string {
  return classes.filter(Boolean).join(' ');
}

interface ActiveLinkProps {
  className: string;
  activeClassName: string;
  defaultClassName: string;
  href: string;
}

const ActiveLink: FC<ActiveLinkProps> = ({
  children,
  className,
  activeClassName,
  defaultClassName,
  href,
}) => {
  const { pathname } = useRouter();

  const activeClass = (href: string) =>
    pathname === href ? activeClassName : defaultClassName;

  return (
    <Link href={href} passHref>
      <a className={classNames(activeClass(href), className)}>{children}</a>
    </Link>
  );
};

ActiveLink.propTypes = {
  activeClassName: PropTypes.string.isRequired,
};

export default ActiveLink;