Creating "active" dropdown menu item - reactjs

Question

I have a functioning "dropdown menu" - clicking on "menu item" routes to a different component. I want to change the style of "dropdown menu item" after clicking, so the next time "dropdown menu" opens, "item" that has been clicked has a different look - indicating active state.
Behavior I want to replicate can be observed on the page I'm re-writing in React : code-learning.uk , after clicking on item from black menu dropdown button (USEFUL ST), "menu item" changes color to blue.
DropdownMenu
import { useState } from "react"
import { MenuItemContentSchool } from "./sub-components/MenuItemContentSchool"
import { Link } from "react-router-dom";
const DropdownMenu = () => {
const [click, setClick] = useState("");
const handleClick = () => setClick("hide-menu");
return (
<div className={`${click}`}>
{MenuItemContentSchool.map((item, index) => {
return (
<Link to={item.link} onClick={handleClick} key={item.title}>
{item.title}
</Link>
)
} )}
</div>
)
}
export default DropdownMenu
NaviMain.js
import { useState } from "react"
import DropdownMenu from "./DropdownMenu";
const NaviMain = () => {
const [disp, setDisp] = useState(false);
const hoverOn = () => setDisp(true)
const hoverOff = () => setDisp(false)
return (
<nav>
<ul>
<li onMouseEnter={hoverOn} onMouseLeave={hoverOff}>
<a>school</a>
{ disp && <DropdownMenu /> }
</li>
</ul>
</nav>
)
}
export default NaviMain
App.js
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import NaviMain from "./components/NaviMain";
import VerticalAlign from "./pages/VerticalAlign";
import Flexbox from "./pages/Flexbox";
function App() {
return (
<Router>
<div className="App">
<NaviMain />
<Routes>
<Route path="/verticalalign" element={<VerticalAlign />} />
<Route path="/flexbox" element={<Flexbox/>} />
</Routes>
</div>
</Router>
);
}
export default App;
MenuItemContentSchool
export const MenuItemContentSchool = [
{
title:"v align",
link:"/verticalalign",
},
{
title:"flexbox",
link:"/flexbox",
},
]

Answer 1

Do a check to see if the current page matches the items link, then add a class to the link for that item.
something like:
const activeClass = window.location.pathname.startsWith(item.link) ? "isActive" : "";
<Link to={item.link} onClick={handleClick} key={item.title} className={activeClass}>
{item.title}
</Link>