Hi all

Using zod + react-hook-form, and then submitting my form via a server action. Code looks like

Form {...form}>
                <form onSubmit={form.handleSubmit(createCard)}>
                    <div className='m-12'>

Server action looks like:

export const createCard= async (formData: FormData) => {
    const { error } = await supabase
        .from('cards')
        .insert({
            // User to attach form to
            client_id: formData.get('clientId'),
            // Left hand
            lefthand_thumb_state: formData.get('leftThumb'),
            lefthand_index_state: formData.get('leftIndex'),
            lefthand_middle_state: formData.get('leftMiddle'),
            lefthand_ring_state: formData.get('leftRing'),
            lefthand_pinky_state: formData.get('leftPinky'),
            // Right hand
            righthand_thumb_state: formData.get('rightThumb'),
            righthand_index_state: formData.get('rightIndex'),
            righthand_middle_state: formData.get('rightMiddle'),
            righthand_ring_state: formData.get('rightRing'),
            righthand_pinky_state: formData.get('rightPinky'),
        })

    if (error) {
        return error;
    }
}

issue is i get a typeerror:

Argument of type '(formData: FormData) => Promise<PostgrestError | undefined>' is not assignable to parameter of type 'SubmitHandler<{ clientId: string; leftThumb: string; leftIndex: string; leftMiddle: string; leftRing: string; leftPinky: string; rightThumb: string; rightIndex: string; rightMiddle: string; rightRing: string; rightPinky: string; }>'.
  Types of parameters 'formData' and 'data' are incompatible.

does anybody why this is? I understand my server action FormData type isn't compatiable with react-hook-form's expected type, but why?