Hi everyone,

I'm currently using the Vercel AI SDK to interact with the ChatGPT API in my Next.js project. I have a form with multiple inputs, and my goal is to combine all the input values and send them to the route responsible for handling the GPT API. Currently, my implementation seems to be accepting only a single input value.

Here's a snippet of my code:

import { useChat } from 'ai/react';
import { useForm } from 'react-hook-form';

...

 const {
    register,
    handleSubmit: onFormSubmit,
    reset,
  } = useForm({
    resolver: zodResolver(schema),
  });

  const {
    messages,
    input,
    setMessages,
    handleInputChange,
    handleSubmit,
    isLoading,
    body,
  } = useChat({
    initialMessages: [
      {
        id: Date.now().toString(),
        role: 'system',
        content:
          //'assistant',
          'Give me 5 word asnwer',
      },
    ],
  });

const onSubmit = async (data, e) => {
    handleSubmit(e);
  };

  return (
      <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')}
              onChange={(e) => handleInputChange(e)}
            />
          </Grid.Col>
          <Grid.Col span={6}>
            <TextInput
              label="Osoite"
              {...register('address')}
              onChange={(e) => handleInputChange(e)}
            />
          </Grid.Col>
</Grid>
 <Button type="submit">Submit</Button>
</form>
)

The issue I'm facing is that it appears to take only one input value. I would like to understand how to modify this code to handle multiple input values from my form and send them to the GPT API route.

Any help or guidance on this matter would be greatly appreciated. Thank you!