React Router V6 – useNavigate() solo puede usarse en el contexto de un componente .

He instalado react-router-dom V6. Estoy teniendo el error anteriormente mencionado al ejecutar mi prueba muy básica con Jest-Enzyme:

expect(shallow().length).toEqual(1);

Ya me encontré con un problema similar mencionado aquí, pero ya estoy haciendo las respuestas proporcionadas. Incluso intenté hacer la importación { BrowserRouter as Router } from “react-router-dom”;. ¿Qué me falta aquí?

index.js

import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { StrictMode } from "react";
import { BrowserRouter } from "react-router-dom";
...

ReactDOM.render(
  <strictmode>
          ...
            <browserrouter>
              <authprovider>
                <app></app>
              </authprovider>
            </browserrouter>
          ...
  </strictmode>,
  document.getElementById("root")
);

**App.js**

import React from "react";
import { useRoutes } from "react-router-dom";
import Routing from "./routes";
import useAuth from "./hooks/useAuth";
import { CreateCustomTheme } from "./theme";
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import useSettings from "./hooks/useSettings";
import useScrollReset from "./hooks/useScrollReset";
import SplashScreen from "./components/splashScreen/SplashScreen";

const App = () => {
  const content = useRoutes(Routing());
  const { settings } = useSettings();
  const auth = useAuth();

useScrollReset();

const theme = CreateCustomTheme({
    direction: settings.direction,
    responsiveFontSizes: settings.responsiveFontSizes,
    roundedCorners: settings.roundedCorners,
    theme: settings.theme,
  });
  return (
    <themeprovider theme="{theme}">
      <cssbaseline></cssbaseline>
      {auth.isInitialized ? content : <splashscreen></splashscreen>}
    </themeprovider>
  );
};

export default App;