Hello,

I'm currently working with the Vercel AI SDK to send form data to my GPT API endpoint. I'm facing an issue with handling the handleSubmit function from the useChat hook.

I'm attempting to call handleSubmit from my onSubmit function, but it doesn't seem to work, and I'm encountering the following error: "Uncaught (in promise) TypeError: e.preventDefault is not a function."

I've followed the Vercel SDK getting started tutorial, and it works with the example form. Here's a snippet of my code:

 const {
    register,
    handleSubmit: onFormSubmit,
    // formState: { errors },
    reset,
  } = useForm({
    resolver: zodResolver(schema),
  });
  const { messages, input, handleInputChange, handleSubmit, isLoading } =
    useChat();

const onSubmit = async (data) => {
    handleSubmit(data);
    //reset();
  };

return
<div>
 <form onSubmit={onFormSubmit(onSubmit)}>
        <Grid>
          <Grid.Col span={{ base: 12, md: 12, lg: 12 }}>
          </Grid.Col>
          <Grid.Col span={6}>
            <TextInput label="Nimi" {...register('name')} />
          </Grid.Col>
          <Grid.Col span={6}>
            <TextInput label="Sukunimi" {...register('lastName')} />
          </Grid.Col>
...
         <Button type="submit">Submit</Button>
</form>
</div>

I'm unsure how to correctly use handleSubmit from useChat for handling multiple inputs. Do I need to convert the data in the onSubmit function to a string, or is there a different approach?

Any guidance would be greatly appreciated. Thank you!