React Router Route Component doesn't rerender and execute

[Ralph Eclipse]

export const routes = [
  {
    path: '/',
    exact: true,
    component: PageIndex,
    private: true
  },
  {
    path: '/login',
    exact: true,
    component: PageLogin
  },
]
export const PrivateRoute = ({ component: Component, ...remaining }) => {
  const { authenticated } = useAuthDataContext();
  return (
    <Route
      render={props =>
        authenticated ? <Component {...props} /> : <Redirect to="/login" />
      }
      key={remaining.path}
    />
  );
};

// BUGS OUT WITH ROUTING
// export const renderRoutes = routes => (
//   <For
//     of={routes}
//     as={route =>
//       route.private ? (
//         <PrivateRoute {...route} key={route.path} />
//       ) : (
//         <Route {...route} key={route.path} />
//       )
//     }
//   />
// );
// export const renderRoutes = routes => (
//   <For of={routes}>
//     {route =>
//       route.private ? (
//         <PrivateRoute {...route} key={route.path} />
//       ) : (
//         <Route {...route} key={route.path} />
//       )
//     }
//   </For>
// );
export const renderRoutes = routes =>
  routes.map(route =>
    route.private ? (
      <PrivateRoute {...route} key={route.path} />
    ) : (
      <Route {...route} key={route.path} />
    )
  );

Last one works but the others not.

This is using the basic redirect on react-router to check if user is authenticated.

Any ideas why it doesn't get redirected when using the two above.