Zustand + React context data is not updating

[prayag17]

I am using Zustand and React context to create a global api variable which is needed by /_api routes.
In /_api route I use beforeLoad to check if context.api is present

// src/routes/_api.tsx

export const Route = createFileRoute("/_api")({
	beforeLoad: async ({ context, location }) => {
		if (!context.api) {
			const currentServerId = await getDefaultServer();
			if (currentServerId) {
				const currentServer = await getServer(currentServerId);
				const userOnDisk = await getUser();
				if (userOnDisk) {
					context.createApi(currentServer?.address, userOnDisk.AccessToken);
				} else {
					context.createApi(currentServer?.address, undefined); // Creates Api
				}
			}
		}
	},
});

this part of code works perfectly and correctly check context.api's presence in application but the issue occurs when I try to load context.api in my component.

// src/routes/_api/login/manual.tsx

export const Route = createFileRoute("/_api/login/manual")({
	component: UserLoginManual,
	beforeLoad: async ({context}) => {
		const api = context.api;
		someFnUsingApi(api)  // this throws error saying api is undefined
	}
});

I even tried using Route.useRouterContext().api but even there api is undefined... But if I try to use useApiInContext function

export function useApiInContext<T>(selector?: (state: ApiStore) => T) {
	const store = useContext(ApiContext);
	if (!store) {
		throw new Error("Missing StoreProvider");
	}
	return useStore(store, selector!);
}

it return the correct api. I followed the same steps as mentioned in Authenticated Routes guide.

What am I doing wrong here?

[schiller-manuel]

can you please provide a minimal complete example, e.g. by forking one of the existing examples on stackblitz?

[prayag17]

I am not able to pin point this exact error...sometimes the context api is defined and sometimes it is not which is very weird but I will try tho you can checkout my entire project at prayag17/JellyPlayer. I will try to provide a reproducible example