Маршрутизатор React с несколькими коммутаторами, отображающий только компоненты первого коммутатора

Я работаю над приложением React и столкнулся с проблемой, описанной ниже.

Это мой основной компонент маршрута, имеющий разные макеты, поэтому я структурировал его следующим образом.

export const AppRoutes = () => {
  return (
    <Switch>
      <AuthRoute>
        <PublicRoutes />
      </AuthRoute>
      <PostRegistrationRoute>
        <PostRegistraionRoutes />
      </PostRegistrationRoute>
    </Switch>
  );
};

Мой файл PublicRoutes выглядит так, как показано ниже

const PublicRoutes = () => {
  return (
    <Switch>
      <Route path="/login" component={SignIn}></Route>
      <Route path="/signup" component={SignUp}></Route>
      <Route path="/confirm/:token?" component={ConfirmEmail}></Route>
      <Route
        path="/complete-your-profile"
        component={CompleteYourProfile}
      ></Route>
      <Route path="/forgot-password" component={ForgotPassword}></Route>
      <Route path="/reset-password/:token?" component={ResetPassword}></Route>
    </Switch>
  );
};

Это второй файл маршрута с Switch

const PostRegistraionRoutes = () => {
  return (
    <Switch>
      <Route path="/pricing-plans" component={PricingPlans}></Route>
      <Route
        path="/payment-success/:subscription_id/:invoice_id"
        component={PaymentSuccess}
      ></Route>
    </Switch>
  );
};

export default PostRegistraionRoutes;

Файл AuthLayout

interface ChildrenProp {
  children: ReactChild | ReactChildren;
}
const AuthRoute = ({ children }: ChildrenProp) => {
  const { state: AuthState } = useContext(AuthContext);

  return (
    <>
      {AuthState.isAuthenticated === false && <>{children}</>}
      {AuthState.isAuthenticated !== false && (
        <>
          <Redirect to="/" />
        </>
      )}
    </>
  );
};
export default AuthRoute;

PostRegistrationLayout также почти аналогичен, поэтому код для этого не публикуется.

Моя проблема в том, что я могу просто видеть маршруты из одного файла либо AuthRoutes, либо PostRegistration. Тот, который я держу в верхней части файла основных маршрутов, работает. Если в основном файле я помещаю PostRegistrationRoute выше AuthRoutes, тогда он начинает рендеринг PostRegistrationRoute и показывает пустую страницу для AuthRoutes.

Использование React Router v5

Пожалуйста, помогите решить проблему или предложите идею для того же.