I tried creating a private route using react-router-dom v6 as shown below in 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;

and the helper components are implemented as shown below

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 ERROR AT TERMINAL AND CONSOLE but I'm not getting any output. The components seems to not rendering properly. Could you please me how to write better private route in v6 of router-dom. Reference: https://dev.to/iamandrewluca/private-route-in-react-router-v6-lg5

THANKS IN ADVANCE