[Bug] Meu link não alterna a classe dinamicamente

Prof, boa tarde, meu link não está trocando dinamicamente e eu não sei o motivo menulink.jsx

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

export default function MenuLink({children, to}) {
   const localizacao = useLocation();
    return (
      <nav>
        <Link 
            to={to}
            className={`
               ${Styles.link}
               ${localizacao.pathname === to ? Styles.linkDestacado : Styles.Link}
            `}
         >
            {children}
        </Link>
      </nav>

  )
}

Menu.jsx

import React from 'react'
import Styles from './Menu.module.css'
import MenuLink from './MenuLink';
import {AiFillGithub, AiFillLinkedin} from 'react-icons/ai'
import { Link, useLocation } from 'react-router-dom';
export default function Menu() {
   const localizacao = useLocation();
   return (
      <nav className={Styles.navegacao}>
        <MenuLink to="/">
            Inicio
         </MenuLink>
        <MenuLink to="/sobremim">
            Sobre mim
         </MenuLink>

        <Link className={`
            ${Styles.link}
            ${localizacao.pathname === '/' ?Styles.linkDestacado :""}
            `} to="https://github.com/IsraelHamdan">    
            <AiFillGithub color='#000' size={30}/>
         </Link>
         <Link className={`Styles.link`} to="https://www.linkedin.com/in/israel-hamdan/">
            <AiFillLinkedin color='#0e76a8' size={30}/>
         </Link>
      </nav>
  )
}