ClerkProvider + QueryClientProvider doesn't work?

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
}>()({
 ...
  beforeLoad: async () => {
    const { user } = await fetchClerkAuth();

    return {
      user,
    };
  },
  errorComponent: (props) => {
    return (
      <RootDocument>
        <DefaultCatchBoundary {...props} />
      </RootDocument>
    );
  },
  notFoundComponent: () => <NotFound />,

  component: RootComponent,
});

function RootComponent() {
  return (
    <ClerkProvider>
      <QueryClientProvider client={queryClient}>
        <RootDocument>
          <Layout>
            <Outlet />
          </Layout>
          {/* <TanStackRouterDevtools position="bottom-right" />
                <ReactQueryDevtools buttonPosition="top-right" /> */}
        </RootDocument>
      </QueryClientProvider>
    </ClerkProvider>
  );
}

TypeError: Cannot read properties of undefined (reading 'addChildren')