Ошибка useLocation() появляется при использовании requireAuth

Question

Я использую маршрутизатор реакции с набором реакции-аутентификации, теперь в моем app.js

Как вы можете видеть, я использую RequireAuth, чтобы требовать аутентификацию в моем приложении перед доступом к домашним ссылкам.

Это мой Home.jsx

      import Nav from "../components/Nav";
import AddPr from "../components/Add_PR";
import GetPr from "../components/Get_PR";
import PRDetails from "../components/Pr_Details";
import { Routes, Route } from "react-router-dom";

const Home = () => {
  return (
    <div className="">
      <Nav />
      <div className="w-full pt-10 p-16 h-screen">
        <Routes>
          <Route path="/" exact element={<GetPr />} />
          <Route path="/pr-add" element={<AddPr />} />
          <Route path="/pr-details/:id" element={<PRDetails />} />
        </Routes>
      </div>
    </div>
  );
};

export default Home;

Но почему я получаю эту ошибку:

      useLocation() may be used only in the context of a <Router> component.

Кажется, я не могу найти решения своей проблемы, я уже обернул свое приложение с помощью BrowserRouter.

      import Home from "./pages/Home";
import Login from "./pages/Login";
import { Routes, Route, useLocation } from "react-router-dom";
import { RequireAuth } from "react-auth-kit";

function App() {
  const location = useLocation();
  return (
    <Routes location={location} key={location.pathname}>
      <Route
        exact
        path="*"
        element={
          <RequireAuth loginPath="/log-in">
            <Home />
          </RequireAuth>
        }
      />
      <Route path="/log-in" element={<Login />} />
    </Routes>
  );
}

export default App;

И я заметил одну вещь: ошибка возникает только тогда, когда я добавил сюда тег RequireAuth.

       <Route
        exact
        path="*"
        element={
          <RequireAuth loginPath="/log-in">
            <Home />
          </RequireAuth>
        }
      />