Selected state on nav item in Next 13 - next.js

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.