was running into the same issue. The issue is that updating state in 1 beforeload (like __root) for another beforeload (like _auth) doesnt work. the state is correctly updated but the second beforeload still reads the stale data. that's just how react works unfortunately. using flush sync fixes it but it is flush sync. online people suggested using an external store outisde of react

my mock up code (hard coded just for testing routing)

export const Route = createRootRouteWithContext<MyRouterContext>()({
  beforeLoad: async ({ context }) => {
    if (!context.auth.isAuthenticated) {
      //  api auth/me call
      await new Promise((resolve) => setTimeout(resolve, 500));
      const apiToken = "1ausidhiausd2";
      const userData: User = {
        email: "[email protected]",
        provider: "EMAIL",
        username: "markmark",
      };
      const res = { accessToken: apiToken, user: userData };
      if (res) {
        flushSync(() => {
          context.auth.setUser(res.user);
        });
        context.auth.setAccessToken(res.accessToken);
        //context.auth.isAuthenticated = true;
      } else {
        context.auth.setUser(null);
        context.auth.setAccessToken(null);
        //context.auth.isAuthenticated = false;
      }
    }
  },
  component: RootComponent,
});