Selected state on nav item in Next 13

Question

I want to have a selected state on a nav item in next 13, I could find no way of getting any context on a server component so ended up with a client component like this

'use client';

import Image from 'next/image';
import Styles from '../styles/header.module.css';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

interface MainRoute {
  name: string;
  path: string;
  index: number;
}

const mainRoutes = [
  { name: 'home', path: '/' },
  { name: 'path 2', path: '/path2' },
  { name: 'path 3', path: '/path3' },
] as MainRoute[];

export default function Header({}) {
  const path = usePathname();
  return (
    <header>
      <div className={Styles.header}>
        <h1>
          App title
        </h1>
      </div>
      <div className={Styles.header}>
        <ul id="mainNav">
          {mainRoutes.map((route, index) => (
            <li key={index}>
              <Link
                className={path === route.path ? Styles.selected : ''}
                href={route.path}
              >
                {route.name}
              </Link>{' '}
              {index !== mainRoutes.length - 1 ? <span>|</span> : ''}
            </li>
          ))}
        </ul>
      </div>
    </header>
  );
}

Is this the best way to achieve this basic styling? As far as I am aware, now all of this code has to be shipped over to the client.