Intenté crear una ruta privada usando react-router-dom v6 como se muestra a continuación en React JS

 import React from 'react'; import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'; import * as ROUTES from './constants/routes'; import { Home, Signin, Signup, Browse } from './pages'; import { IsUserRedirect, ProtectedUserRedirect } from './helpers/routes'; function App() { const user=null; return ( <> <Router> <Routes> <Route exact path={ROUTES.HOME} element={<IsUserRedirect user={user} path={ROUTES.BROWSE} />}> <Route element={<Home />} /> </Route> <Route exact path={ROUTES.BROWSE} element={<ProtectedUserRedirect user={user} path={ROUTES.SIGN_IN} />}> <Route element={<Browse />} /> </Route> <Route exact path={ROUTES.SIGN_IN} element={<IsUserRedirect user={user} path={ROUTES.BROWSE} />}> <Route element={<Signin />} /> </Route> <Route exact path={ROUTES.SIGN_UP} element={<IsUserRedirect user={user} path={ROUTES.BROWSE} />}> <Route element={<Signup />} /> </Route> </Routes> </Router> </> ); } export default App;

y los componentes auxiliares se implementan como se muestra a continuación

 import React from 'react'; import { Navigate, Outlet } from 'react-router-dom'; export const IsUserRedirect = ({path, user, children}) => { console.log(Boolean(user)) return ( user?<Navigate to={path} replace />:<Outlet /> ) } export const ProtectedUserRedirect = ({path, user, children}) => { console.log(Boolean(user)) return ( user?<Outlet />:<Navigate to={path} replace /> ) }

NO HAY ERROR EN LA TERMINAL Y LA CONSOLA , pero no obtengo ningún resultado. Los componentes parecen no renderizarse correctamente. ¿Podría por favor decirme cómo escribir una mejor ruta privada en v6 de router-dom? Referencia: https://dev.to/iamandrewluca/private-route-in-react-router-v6-lg5

GRACIAS DE ANTEMANO