Styling parent of <Link> with active state

I'd like to style a navigation that's structured like this:

<ul>
  <li className="active">
    <Link to="/foo">...</Link>
  </li>
</ul>

<ul>
  <li className="active">
    <Link to="/foo">...</Link>
  </li>
</ul>

<ul>
  <li className="active">
    <Link to="/foo">...</Link>
  </li>
</ul>

<ul>
  <li className="active">
    <Link to="/foo">...</Link>
  </li>
</ul>

How do i elegantly control the

className

className

className

className? I was looking at comparing

/foo

/foo

with

useLocation().pathname

useLocation().pathname

useLocation().pathname

useLocation().pathname but it's typed as

string

string

so maybe there's a better way.