hello, I have been following this tutorial from Jack Herrington https://www.youtube.com/watch?v=VLk45JBe8L8&t=825s on using server actions with forms. and I am running into this issue where when referencing my form using the useRef hook and assigning it to the onSubmit prop of the form with: form.handleSubmit(() => formRef.current?.submit()) my form does not submit as the formRef.current value is returning a null value. removing the onSubmit prop from the form enables me to call the server action but I am not able to bring back any client side validation.

export default function signup(){
const signupFormRef = useRef<HTMLFormElement>(null);
const [state, formAction] = useFormState(actionSignupOnSubmit, {
message: ''
})

const form = useForm<z.infer<typeof signupFormSchema>>({
  resolver: zodResolver(signupFormSchema),
  defaultValues: {
  firstName: '',
  lastName: '',
  email: '',
  password: '',
  passwordConfirm: '',
  accountType: ''
},
})

return ... <form ref={signupFormRef} action={formAction} onSubmit={form.handleSubmit(() => signupFormRef.current!.submit(), )}> .... </form> ...