Re-creating context with an auth token from Firebase not working

Question

I am using the react-firebase-hooks for tRPC and have created a <GuardedRoute /> component that checks permissions and redirects to login (Firebase) to obtain an auth token. This is working.

A fragment of my component looks like this:

const GuardedRoute = observer((props: {
  element: React.ReactNode | null,
  fallback: React.ReactNode | null | undefined,
  drawer: React.ReactNode | null | undefined,
  requiredPermission: Permission
}) => {
  const state = useContext(StateContext);
  const [user, loadingUser, userError] = useIdToken(auth);
  const {
    isLoading: loadingPermissions,
    isError: permissionError,
    data: hasPermission,
  } = trpc.myApp.hasPermission.useQuery({
    permission: props.requiredPermission,
    authToken: state.authToken
  });
  // ...other stuff
})

In my <App /> component, I re-create the trpcClient, like this:

const App = observer(() => {
  const state = useContext(StateContext);
  const [user, loading, error] = useIdToken(auth);
  const [trpcClient, setTrpcClient] = useState<CreateClient | null>(null);
  const [queryClient] = useState(() => new QueryClient());

  useEffect(() => {
    getAuthToken(user).then((authToken) => state.setAuthToken(authToken));
    state.setUser(user);
  }, [user]);

  useEffect(() => {
    setTrpcClient(createTrpcClient(authToken));
  }, [authToken]);
  // ...etc
})

The useEffect() here is not quite right, I am talking many weeks ago now, but it was certainly calling it with the right token whatever I supplied.

My createTrpcClient() looks like this:

export const createTrpcClient = (authToken?: string) => {
  return trpc.createClient({
    links: [
      splitLink({
        condition(op) {
          return op.type === 'subscription';
        },
        true: wsLink({
          client: createWsClient(authToken)
        }),
        false: httpBatchLink({
          url: `${SECURE ? 'https' : 'http'}://${HOST}`,
          async headers() {
            return {
              authorization: authToken
            };
          }
        })
      })
    ]
  });
}

Now this is being called at the right time, as expected. But the header is not being applied for some time, or at least not immediately, and so the subsequent call to my permission endpoint fails. It does eventually trickle through, but why does that not get applied immediately?

As it is, I am having to decode and store the token in mobx state and pass it with every call to my API, which is obviously a pain in the backside.

I expect it is due to the async nature of the header function? Maybe? What is the recommended pattern here?