How do i integrate Google Analytics 4 in a react app with React router?

Question

I would like to know how i can set up google analytcis in a multiple page react app that uses react router. After a lot of looking around i discovered that my react-ga solution wasn't woking because the id wasn't UA- but G- and google will stop tracking UA next year so switching to universal isn't an option now. I did find react-ga4 and react-ga-4 but i don't which to choose nor how to initialize and set up with react router. Here's my App.js function with the Router

function App() {
  return (
    <div className={ window.location.pathname =='/' ? "App" : "App AppOV"}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Landing/>} />
          <Route path="/quiz" element={<Quiz/>} />
          <Route path="/caja-de-herramientas" element={<Caja/>} />
          <Route path="/guia-autocorrecion" element={<GuiaAuto/>} />
          <Route path="/caja-de-herramientas/sustantivos" element={<Sustantivos/>} />
          <Route path="/caja-de-herramientas/pronombres" element={<Pronombres/>} />
          <Route path="/caja-de-herramientas/expresiones" element={<Expresiones/>} />
          <Route path="/caja-de-herramientas/nuevos-morfemas" element={<NuevosMorfemas/>} />
          <Route path="/que-sentido-tiene-el-lenguaje-inclusivo" element={<Texto/>} />
          <Route path="/acerca-del-proyecto" element={<Acerca/>} />
          <Route path="/caja-de-herramientas/herramientas" element={<Herramienta/>} />
        </Routes> 
        
    </BrowserRouter>
    </div>
  );
}