Error: Manual Form Submit

[themse]

Issue Title: Error: Form Submit

Description: After adding the useFormState hook and switching to manual form submission using formRef, I encountered issues with the functionality: time to time, I get the error (attached screenshot)

Expected Behavior: We can workaround it using client and react-hook-form in such way:

    const form = useForm<FormValues>({
        resolver: zodResolver(schema),
        defaultValues: {
            email: '',
            password: '',
            confirmEmail: '',
        },
    });
    const {
        formState: { errors },
    } = form;

    const onSubmit = async (data: FormValues) => {
        const response = await signUpAction(data);

        if (response.error) {
            form.setError('root.serverError', {
                type: '400',
                message: response.message,
            });
        }
    };

      // and view (JSX)
        {errors.root?.['serverError'] && (
        <HelperText className="my-4 text-center" variant="error">
            <b>Server Error: </b>
            {errors.root?.['serverError'].message}
        </HelperText>
    )}

But your version is elegant and much better.

Actual Behavior: Screenshot with error attached. It happens here

    <form
        action={formAction}
        className="flex flex-col gap-y-28"
        onSubmit={form.handleSubmit(() => formRef?.current?.submit())} // <=== Here. 
        ref={formRef}
    >

Link to place in repo https://github.com/ProNextJS/forms-management/blob/main/src/app/RegistrationForm.tsx#L95C8-L95C71 Recommendations in Error stack trace also don't work :(

Have you come across such issue?

Screenshots (if applicable):

Additional Information: Operating System: macOS Sonoma 14.4.1 Browser/Software Version: Google Chrome Version 123.0.6312.87

[themse]

I truly appreciate all the tremendous work you have done for us. Thank you very much, and I apologize for any inconvenience or disturbance caused.

[themse]

If someone has watched the video and also encountered this issue, here is the solution that I found in Jack's another repository.

https://github.com/ProNextJS/forms-management-yt/blob/main/forms-mgmt-finished/src/app/MailForm.tsx#L61-L66

briefly

        onSubmit={(evt) => {
          evt.preventDefault();
          form.handleSubmit(() => {
            formAction(new FormData(formRef.current!));
          })(evt);
        }}

instead of

onSubmit={form.handleSubmit(() => formRef?.current?.submit())}

[jherr]

Nice! That's actually good fix for the useFormStatus issue that folks are running into.

[themse]

@jherr I can create PR if it's necessary

[jherr]

I'm never one to refuse a good PR, believe me.