How to use Posthog to capture pageview events with React Router?

I have the following SPA that uses react router:

ReactDOM.createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Providers>
      <BrowserRouter>
        <Routes>
          <Route element={<ProtectedRoutes />}>
            <Route path="/dashboard" element={<MainPage />} />
            <Route path="/dashboard/setup" element={<SetupPage />} />
            <Route path="/dashboard/project/:projectId" element={<ProjectPage />} />
          </Route>
          <Route path="/admin" element={<ProtectedRoutes admin />}>
            <Route path="" element={<div>you are admin</div>} />
            <Route path="users" element={<UsersPage />} />
            <Route path="data/view" element={<DataViewPage />} />
            <Route path="tasks" element={<TasksPage />} />
          </Route>
          <Route element={<PublicOnlyRoutes redirectTo="/dashboard?redirect=true" />}>
            <Route path="/login" element={<LoginPage />} />
          </Route>
          <Route path="/" element={<HomePage />} />
          <Route
            path="/demo"
            element={<DemoComponent message="Sample message" name="User" />}
          />
        </Routes>
      </BrowserRouter>
    </Providers>
  </StrictMode>,
);

I would like to use Posthog’s event capturing with this to track when users navigate around the application. Like this:

function PostHogIdentifier() {
  const location = useLocation();

  // Track pageviews
  useEffect(() => {
    if (posthog) {
      console.log("Capturing pageview", window.location.href);
      posthog.capture(
        '$pageview',
        {
          '$current_url': window.location.href,
        }
      )
    }
  }, [location])
  
  return null;
}

But, I can’t do this because the useLocation hook must be run inside of the BrowserRouter. And I’m not sure how to do this since the BrowserRouter only supports Route and Routes child components.