Getting TS error `xyz is not assignable to type '"Function is not serializable"'` from `beforeLoad`

export const getAllTodos = createServerFn().handler(async () => ['ToDo 1', 'ToDo 2', 'ToDo 3'];

export const Route = createFileRoute('/')({
  beforeLoad: () => ({ queryOptions: { queryKey: ['todos'], queryFn: getAllTodos } }),
  loader: async ({ context: ctx }) => {
    await ctx.queryClient.prefetchQuery(ctx.queryOptions);
  },
  component: App,
});

Type '() => { queryOptions: { queryKey: string[]; queryFn: OptionalFetcher<Register, undefined, undefined, string[]>; }; }' is not assignable to type '(ctx: BeforeLoadContextOptions<Register, RootRoute<Register, undefined, MyRouterContext, AnyContext, AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, ... 5 more ..., undefined>) => { ...; }'.
  Call signature return types '{ queryOptions: { queryKey: string[]; queryFn: OptionalFetcher<Register, undefined, undefined, string[]>; }; }' and '{ queryOptions: { queryKey: string[]; queryFn: "Function is not serializable"; }; }' are incompatible.
    The types of 'queryOptions.queryFn' are incompatible between these types.
      Type 'OptionalFetcher<Register, undefined, undefined, string[]>' is not assignable to type '"Function is not serializable"'.ts(2322)