Implementing protected routing with react router v6

Here is my working example for implementing protected routes by using useRoutes hook.

App.js

import routes from './routes';
import { useRoutes } from 'react-router-dom';

function App() {
  const { isLoggedIn } = useSelector((state) => state.auth);

  const routing = useRoutes(routes(isLoggedIn));

  return (
    <>
      {routing}
    </>
  );
}

routes.js

import { Navigate,Outlet } from 'react-router-dom';

    const routes = (isLoggedIn) => [
      {
        path: '/app', // protected routes
        element: isLoggedIn ? <DashboardLayout /> : <Navigate to="/login" />,
        children: [
          { path: '/dashboard', element: <Dashboard /> },
          { path: '/account', element: <Account /> },
          { path: '/', element: <Navigate to="/app/dashboard" /> },
          {
            path: 'member',
            element: <Outlet />,
            children: [
              { path: '/', element: <MemberGrid /> },
              { path: '/add', element: <AddMember /> },
            ],
          },
        ],
      },
      { // public routes
        path: '/',
        element: !isLoggedIn ? <MainLayout /> : <Navigate to="/app/dashboard" />,
        children: [
          { path: 'login', element: <Login /> },
          { path: '/', element: <Navigate to="/login" /> },
        ],
      },
    ];
    
    export default routes;