Nested Protected routes and react-router race condition - reactjs

Question

I am on react-router v6. I have an app that I've created Protected routes for and so far it works. However I have requirements to protect a few routes that are nested (within a protected route) which is where bugs are occurring.
My attempt to explain:
I have a hook that will fetch necessary member information at the top most level. This is used in tandem with useReactiveVar w/ apollo and a graphql backend. This works for the most part.
While this fetches, I have one level of protected routing -- this will check if the user is logged in via `localStorage.getItem('access_token').
In my second level of protected routing, it'll try to read data from the aforementioned member information. This will be undefined while the information is being fetched.
The first level of protected routing is resolved. My second level of protection is then ignored since member data is null. I think this is a race condition?
My code:
// ProtectedRoute.tsx
export const ProtectedRoute = ({
redirectPath = Routes.Landing,
isAllowed,
noBaseLayout,
}: ProtectedRouteProps) => {
if (!isAllowed) {
return <Navigate to={redirectPath} replace />;
}
if (noBaseLayout) {
return <Outlet />;
}
return (
<BaseLayout>
<Outlet />
</BaseLayout>
);
};
export default function routes() {
const isLoggedIn = localStorage.getItem('access_token');
const currentUser = useReactiveVar(currentMeVar); // This will be null at first until it resolves
const elements: RouteObject[] = [
// Unauth'd routes. Visiting these routes *with* a user will direct back to the dashboard
{
element: (
<ProtectedRoute isAllowed={!isLoggedIn} redirectPath={Routes.Dashboard} noBaseLayout />
),
children: [
{
path: Routes.Landing,
element: <LandingPage />,
},
{
path: Routes.PatientLoginToken,
element: <LoginTokenPage scope={UserScope.Member} />,
},
{
path: Routes.CaregiverLoginToken,
element: <LoginTokenPage scope={UserScope.Caregiver} />,
},
{
path: Routes.PatientLogin,
element: <PatientLoginPage />,
},
{
path: Routes.RequestLoginEmail,
element: <RequestEmailLoginPage />,
},
{ path: Routes.CaregiverLogin, element: <CaregiverLoginPage /> },
{ path: Routes.CaregiverCompleteSignup, element: <CaregiverCompleteSignupPage /> },
{
path: Routes.PatientSignup,
element: <PatientSignupPageOneStep />,
},
{
path: Routes.PatientSignupClient,
element: <PatientSignupPageOneStep />,
},
],
},
// Auth'd routes. Visiting these routes *without* a user will redirect back to the landing page
{
element: <ProtectedRoute isAllowed={!!isLoggedIn} />,
children: [
{ path: Routes.Dashboard, element: <DashboardPage /> },
{ path: Routes.ContentLibrary, element: <ContentLibraryBrowsePage /> },
// Auth'd, but user has no covered life yet. This will redirect back to the dashboard page
{
element: (
<ProtectedRoute
isAllowed={currentUser?.member.hasCoveredLifeAttached}
redirectPath={Routes.Dashboard}
noBaseLayout
/>
),
children: [
{ path: Routes.Scheduling, element: <ScheduleSessionTakeoverPage /> },
{ path: Routes.Session, element: <EmbeddedSessionPage /> },
{ path: Routes.PostSession, element: <PostSessionPage /> },
{ path: Routes.Sessions, element: <SessionsPage /> },
{ path: Routes.Profile, element: <ProfilePage /> },
{ path: Routes.ContentLibraryDetail, element: <ContentLibraryDetailPage /> },
{
path: Routes.Stats,
element: <StatsPage />,
children: [
{
path: Routes.BloodPressureStats,
element: <StatsPage.BloodPressureChart />,
index: true,
},
{ path: Routes.WeightStats, element: <StatsPage.WeightChart /> },
{ path: Routes.MoodStats, element: <StatsPage.MoodChart /> },
{
path: Routes.PhysicalActivityStats,
element: <StatsPage.PhysicalActivityChart />,
},
{
path: Routes.HeartRateStats,
element: <StatsPage.HeartRateSessionsView />,
},
{ path: Routes.HeartRateStatsDetail, element: <StatsPage.HeartRateSignalsView /> },
{
path: Routes.BloodOxygenStats,
element: <StatsPage.BloodOxygenSessionsView />,
},
{
path: Routes.BloodOxygenStatsDetail,
element: <StatsPage.BloodOxygenSignalsView />,
},
{
path: Routes.StepsStats,
element: <StatsPage.StepsChart />,
},
{
path: Routes.SleepStats,
element: <StatsPage.SleepChart />,
},
],
},
],
},
],
},
{ path: '*', element: <NotFoundPage /> },
];
return useRoutes(elements);
}