El desplazamiento suave no funciona con react-router-hash-link.

Actualicé react-router a la versión 6 y ahora, cuando añado “smooth” a HashLink, ni siquiera desplaza la página.

json
    "react-router": "^6.2.1",
    "react-router-dom": "^6.2.1",
    "react-router-hash-link": "^2.4.3",

Entonces intenté cambiarlo por un simple <a href=""> y añadir scroll-behavior:smooth en CSS, pero tampoco funciona.

html
           <div classname="navbar__center">
                <nav>
                    <hashlink smooth="" to="/#home">
                        Home
                    </hashlink>
                    <hashlink smooth="" to="/#about">
                        About
                    </hashlink>
                    <hashlink smooth="" to="/#works">
                        Works
                    </hashlink>
                </nav>
            </div>

Así que, por supuesto, en la misma página tengo esto:

html
<section classname="home__section home__2" id="about">

Puedo ver la etiqueta de anclaje de hash en la URL y navegar a ella si la abro en una nueva pestaña, pero eso es todo.

Las rutas:

     <BrowserRouter>
        <main className="main">
          <Routes>

<pre><code>        <Route path="/" element={<Home />}>
        </Route>

        <Route path="*" element = {<FourOhFour/>} />

      </Routes>
    </main>
  </BrowserRouter>

“`