Passing hook result into context w/ Tanstack Start

const router = createRouter({
  routeTree,
  context: {
    auth: undefined!, // This will be set after we wrap the app in an Provider
    client: undefined!, //  This will be set after we wrap the app in an Provider
    reactQueryClient: undefined!, //  This will be set after we wrap the app in an Provider
  },
});

const InnerApp = () => {
  const auth = useAuth();
  const client = useClient();
  const reactQueryClient = useQueryClient();
  useAdminFunctions();

  return <RouterProvider router={router} context={{ auth, client, reactQueryClient }} />;
};

const rootElement = document.getElementById("app")!;
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
      <React.StrictMode>
            <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
              <ClerkLoaded>
                <GraphqlProvider>
                  <QueryClientProvider client={queryClient}>
                    <InnerApp />
                  </QueryClientProvider>
                </GraphqlProvider>
              </ClerkLoaded>
            </ClerkProvider>
      </React.StrictMode>
    );
}