link não alterna o destaque dinamicamente

Verifiquei todo código nos detalhes, e aparentemente não está errado, porém os links não se destacam dinamicamente como mostrado na aula. Alguém pode me ajudar ??

Menu

import MenuLink from '../menuLink';
import styles from './Menu.module.css';

export default function Menu() {
    return (
        <header>
            <nav className={styles.navegacao}>
                <MenuLink to="/">
                    Início
                </MenuLink>
                <MenuLink to="/sobremim">
                    Sobre Mim
                </MenuLink>
            </nav>
        </header>
    );
}

MenuLink

import { Link, useLocation } from 'react-router-dom';
import styles from './MenuLink.module.css';

export default function MenuLink({ children, to }) {
    const localizacao = useLocation();

console.log(to); // verifique se a propriedade 'to' está definida corretamente
  console.log(localizacao.pathname); // verifique o valor da propriedade 'pathname'
  console.log(styles); // verifique se a classe CSS 'linkDestacado' está definida corretamente

    return (
        <Link className={`
            ${styles.link}
            ${localizacao.pathname === to ? styles.linkDestacado : ''}

        `} to={to}>

            {children}

        </Link>
    )
}

routes.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import SobreMim from "./pages/Sobremim";
import Menu from "./componentes/menu";




function AppRoutes() {
  return (
    <BrowserRouter>
      <Menu />

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/sobremim" element={<SobreMim />} />
        <Route path="*" element={<div>Página não encontrada</div>} />
      </Routes>
    </BrowserRouter>
  )
}

export default AppRoutes;