OS DOIS LINKS PERMANENCEM ATIVOS

Mesmo usando a propiedade "end" no Navlink, os dois links ficam como ativos. Já analisei o código de cima abaixo e não encontrei ompossível problema.

MenuLink

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

export default function MenuLink({ children, to }) {

    return (
        <NavLink
            className={({ isActive }) => `
                ${styles.link}
                ${isActive ? styles.linkDestacado : ""}
            `}
            to={to}
            end
        >
            {children}
        </NavLink>
    )
}

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>
    );
}

Routes

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;

MenuLink.module.css

.link {
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: var(--cor-fonte-principal);
}

.linkDestacado {
    text-decoration: underline;
}