Как корректно настроить роутинг через react-router-dom v. 5.3?

Question

[lexstile]

Если isAuthenticated = false, public роуты работают, страница 404 не работает.
Если isAuthenticated = true, возникает ошибка:

react-dom.development.js:23798 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

(Если убираю публичные роуты из App.jsx, то приватные начинают работать)

Как правильно сделать, когда isAuthenticated = false, работали все паблик роуты, был редирект с приватных роутов, работала 404 страница на несуществующие роуты?

И сделать, когда isAuthenticated = true, работали все приватные роуты, был редирект с паблик роутов, работала 404 страница на несуществующие роуты?

App.jsx

spoiler

<BrowserRouter>
                <Suspense fallback={<ScreenSpinner />}>
                  <Switch>
                    <PublicRoute isAuthenticated={isAuthenticated}>
                      <PublicRoutes />
                    </PublicRoute>
                    <PrivateRoute isAuthenticated={isAuthenticated}>
                      <PrivateRoutes />
                    </PrivateRoute>
                    <Route>
                      <NotFoundPage />
                    </Route>
                  </Switch>
                </Suspense>
              </BrowserRouter>

PublicRoute

spoiler

export const PublicRoute = ({ children = null, isAuthenticated = false, ...rest }) => {
  return (
    <Route
      {...rest}
      render={({ location }) =>
        !isAuthenticated ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: '/',
              state: { from: location },
            }}
          />
        )
      }
    />
  );
};

PrivateRoute

spoiler

export const PrivateRoute = ({ children = null, isAuthenticated = false, ...rest }) => {
  return (
    <Route
      {...rest}
      render={({ location }) =>
        isAuthenticated ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: location },
            }}
          />
        )
      }
    />
  );
};

PublicRoutes

spoiler

const routes = [
  {
    path: 'login',
    component: lazy(() => import('pages/LoginPage')),
    exact: true,
  },
  {
    path: 'register',
    component: lazy(() => import('pages/RegisterPage')),
    exact: true,
  },
  {
    path: 'forgot-password',
    component: lazy(() => import('pages/ForgotPasswordPage')),
    exact: true,
  },
];

export const PublicRoutes = () => (
  <Switch>
    <Suspense fallback={<ScreenSpinner />}>
      {routes.map(({ component: Component, path, exact }) => (
        <Route path={`/${path}`} key={path} exact={exact}>
          <Component id={path} />
        </Route>
      ))}
    </Suspense>
  </Switch>
);

PrivateRoutes

spoiler

const routes = [
  {
    path: '',
    component: lazy(() => import('pages/HomePage')),
    exact: true,
  },
];

export const PrivateRoutes = () => (
  <Switch>
    <Suspense fallback={<ScreenSpinner />}>
      {routes.map(({ component: Component, path, exact }) => (
        <Route path={`/${path}`} key={path} exact={exact}>
          <Component id={path} />
        </Route>
      ))}
    </Suspense>
  </Switch>
);