React Hook form not submitting login credentials next auth

The problem here is that when i try to login with email and password,I dont see any request on the network in the browser.I tried the same pattern with server action of next js 14 .It works but it does not work with next auth.

export type InputsSignIn = z.infer<typeof userSchema>;
export const SigninForm = () => {
    const router = useRouter();

    const form = useForm<InputsSignIn>({
        resolver: zodResolver(userSchema),
    });

    const onSubmit = async (data: InputsSignIn) => {
        const userIn = await signIn('credentials', {
            email: data.email,
            password: data.password,
            callbackUrl: '/admin',
            redirect: false
        });
        if (userIn?.error) {
            toast.error("error signing in")
        }
        else {
            router.refresh()
            router.push("/admin")
        }
    };

    return (
        <div className="mx-auto items-center max-w-xs min-h-screen mt-32 px-5">
            <h1 className="mb-5 font-bold">Sign in</h1>
            <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
                    <FormField
                        control={form.control}
                        name="email"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Email</FormLabel>
                                <FormControl>
                                    <Input placeholder="email" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="password"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Password</FormLabel>
                                <FormControl>
                                    <Input placeholder="password" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <Button type="submit">Sign In</Button>
                </form>
            </Form>
        </div>
    );
};

I used formData to get the data from form it works but the problem now is that next auth give me signin error. error: Callback for provider type credentials not supported

//api/auth/[...nextauth]/route.ts
import prisma from "@/lib/client";
import { compare } from "bcrypt";
import { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions: NextAuthOptions = {
    providers: [
        CredentialsProvider({
            credentials: {
                email: {  },
                password: { },
            },

            async authorize(credentials, req) {
                try {
                    const user = await prisma.user.findUnique({
                        where: {
                            email: credentials?.email,
                        },
                    });

                    if (!user) {
                        throw new Error("User not found");
                    }

                    const passwordValid = await compare(credentials?.password!!, user.password);

                    if (!passwordValid) {
                        throw new Error("Invalid password");
                    }
                    else {
                        return user;
                    }
                } catch (error) {
                    return null

                }

            },
        }),
    ],
    session: {
        strategy: "jwt",
    },
    pages: {
        signIn: "/signin",
    },
};

SO the simplify the question, how do i get react hook form to work with next auth in next js 14.

I tried with formdata with react hook form it works but only with the action prop of the form

<form action{….formdata} but I would like to use the type generated by zod with react hook forms.