I want to make a form to display and update details of a team after fetching data from the api, there is a field metadata, which is a returned as object, when I display try to display it in input element, it shows an error as shown below:

How should I solve this issue? I guess it’s because input element cannot be used to hold an object value?

Here is where the error emerge:

    <FormField
      control={form.control}
      name="metadata"
      render={({ field }) => (
        <FormItem>
          <FormLabel>Metadata</FormLabel>
          <FormControl>
            <Input
              {...field}
              value={JSON.stringify(teamInfo?.metadata)} //to be confirmed
              disabled={!editMode}
            />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />;

This is the schema of metadata field defined with zod

    metadata: z
      .string()
      .regex(
        /^(w+:w+,)*(w+:w+)$/,
        'Invalid format, please use key1:value1,key2:value2 format',
      )
      .optional()
      .transform((val) => {
        const metadata: Record<string, string> = {};
        if (val) {
          const pairs = val.split(',');
          for (const pair of pairs) {
            const [key, value] = pair.split(':');
            metadata[key] = value;
          }
        }

        return metadata;
      }),

I have tried overwriting the value property of input element, then the error is gone

    <Input
      {...field}
      value={JSON.stringify(teamInfo?.metadata)} //to be confirmed
      disabled={!editMode}
    />;