I’m trying to submit a form to an instance of supabase that i know is offline so i can test handle network errors and show a message to the user.

This is what i have:

const {
    register,
    handleSubmit,
    setError,
    reset,
    formState: { errors, isSubmitting },
} = useForm({
    values: {},
    defaultValues: {},
    resolver: zodResolver(schema),
})




const onSubmit = async (formdata, e)=>{
    const { data, error } = await supabase.auth.signUp({
        email: formdata.email,
        options: {
            emailRedirectTo: 'http://localhost:5173/login',
        },
    })
    


    if (error){
        //if signup fails (error is not false), this part is reach, but form resets and no error is shown although the error is set;
        setError("APIError", {
            message: "There was an error creating your account. Please validate your email and try again.",
        });
    }   



    if (!error){
        setShowFormResultMessage(true)
        reset();
    }
}




return (
    <form>
        <input type="text" {...register("email")} />
        errors.email && <p>{errors.email.message}</p> 

        {
            //This error is never shown...
        }
        errors.APIError && <p>{errors.APIError.message}</p>

    </form>
)

Submiting the form will return a network + fetch error and the form is reset, not showing any error message:

How to handle this network error and make sure the error message is shown?