form.state.isSubmitting not working

import { Button } from "@/components/ui/button";
import { FieldGroup } from "@/components/ui/field";
import { loginServerFn } from "@/functions/auth";
import { useAppForm } from "@/hooks/use-app-form";
import { loginSchema } from "@/schemas/user";
import { useNavigate } from "@tanstack/react-router";
import { useServerFn } from "@tanstack/react-start";
import { EyeIcon, EyeOffIcon, LogInIcon, MailIcon } from "lucide-react";
import { useState } from "react";
import type z from "zod";

export const LoginForm = () => {
  const navigate = useNavigate();
  const loginFn = useServerFn(loginServerFn);

  const [showPassword, setShowPassword] = useState<boolean>(false);

  const form = useAppForm<z.infer<typeof loginSchema>>({
    defaultValues: { email: "", password: "" },
    validators: {
      onSubmit: loginSchema,
      onSubmitAsync: async ({ value: data }) => {
        const { ok, error } = await loginFn({ data });
        if (ok) return;
        return { fields: error };
      },
    },
    onSubmit: async () => {
      await navigate({ to: "/" });
    },
  });

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        form.handleSubmit();
      }}
    >
      <FieldGroup>
        <form.AppField name="email">
          {(field) => (
            <field.Input />
          )}
        </form.AppField>
        <form.AppField name="password">
          {(field) => (
            <field.Input />
          )}
        </form.AppField>
        <Button disabled={form.state.isSubmitting}>
          <LogInIcon /> Login
        </Button>
      </FieldGroup>
    </form>
  );
};