title: React Router V6 - useNavigate() may be used only in the context of a <Router> component
body: <p>I have installed react-router-domV6. I am having the above error when I run my very basic test using Jest-Enzyme:</p>
  <pre><code>expect(shallow(&lt;CustomerListTable customers={mockCustomers} /&gt;).length).toEqual(1);
  </code></pre>
  <p>I already came across this <a href="https://stackoverflow.com/questions/65425884/react-router-v6-error-useroutes-may-be-used-only-in-the-context-of-a-route">similar issue mentioned here</a>, but I am already doing the provided answers. Even tried doing the <code>import { BrowserRouter as Router } from &quot;react-router-dom&quot;;</code>. What am I missing here?</p>
  <p><strong>index.js</strong></p>
  <pre><code>import React, { Suspense } from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import App from &quot;./App&quot;;
  import { StrictMode } from &quot;react&quot;;
  import { BrowserRouter } from &quot;react-router-dom&quot;;
  ...
  
  ReactDOM.render(
    &lt;StrictMode&gt;
            ...
              &lt;BrowserRouter&gt;
                &lt;AuthProvider&gt;
                  &lt;App /&gt;
                &lt;/AuthProvider&gt;
              &lt;/BrowserRouter&gt;
            ...
    &lt;/StrictMode&gt;,
    document.getElementById(&quot;root&quot;)
  );
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { useRoutes } from &quot;react-router-dom&quot;;
  import Routing from &quot;./routes&quot;;
  import useAuth from &quot;./hooks/useAuth&quot;;
  import { CreateCustomTheme } from &quot;./theme&quot;;
  import { ThemeProvider } from &quot;@mui/material/styles&quot;;
  import CssBaseline from &quot;@mui/material/CssBaseline&quot;;
  import useSettings from &quot;./hooks/useSettings&quot;;
  import useScrollReset from &quot;./hooks/useScrollReset&quot;;
  import SplashScreen from &quot;./components/splashScreen/SplashScreen&quot;;
  
  const App = () =&gt; {
    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 (
      &lt;ThemeProvider theme={theme}&gt;
        &lt;CssBaseline /&gt;
        {auth.isInitialized ? content : &lt;SplashScreen /&gt;}
      &lt;/ThemeProvider&gt;
    );
  };
  
  export default App;
  </code></pre>