How To? ShadCn Form With 'useFieldArray' and Multiple ComboBox's and setValue Overwitting Previous ComboBox Values

[launchthatbrand]

I am trying to create a form with 2 comboboxes inside a fieldArray.

What is happening with the below code:

Everything works fine on the frontend. I can add multiple instances of the array fields and my select options are correct. On form submit I am simply console.log the values. What is not working is that when I fill out the first combobox, hit submit, the nested item category title/id fields are correct. When i fill out the first comboBox, then the second comboBox, hit submit, the item title/id is correct, but it has overwritten the nested category title/id to be blank.

I believe this has to do with my second comboBox setValue:

form.setValue(`items.${index}`, {
    name: language.title,
    id: language.id,
});

which has no data for `items.${index}.category, so it overwrites all other data in items.${index} to undefined/blank.

Things I have tried:

1. Trying to pass existing nested values into the second setValue function:

form.setValue(`items.${index}`, {
    name: language.title,
    id: language.id,
     ...field.value,
});

This half works, but now I cannot modify my second combobox value after initial selection. I do not think ...field.value is correct, maybe I should be passing {...field} into the combobox component as seen here in the Input component?

2. Setting each value individually:

form.setValue(`items.${index}.name`, language.title)
form.setValue(`items.${index}.id`, language.id)

This actually works, but if I were to have 10 nested fields to set the code seems exhausting

What is the proper way to define the setValue function with multiple ComboBox's?

My Code:
I have an interface:

interface FormValues {
  type: string;
  items: {
    category: {
      title: string;
      id: string;
    };
    id: string;
    name: string;
    quantity: number;
  }[];
  volunteer: string;
  location: string;
  event: string;
}

and then a fieldArray:

const {
    fields: itemFields,
    append,
    remove,
  } = useFieldArray({
    control: form.control,
    name: "items", // The key of the field array
  });

my first comboBox:

{itemFields.map((field, index) => (
            <div
              key={index}
              className="flex w-full flex-wrap space-y-3 rounded-sm bg-slate-100 p-3"
            >
              <FormField
                control={form.control}
                name={`items.${index}.category`}
                render={({ field }) => (
                  <FormItem className="flex w-full flex-col">
                    <FormLabel>Category</FormLabel>
                    {field.name}
                    <Popover
                      open={openPopover === `${field.name}`}
                      onOpenChange={() => handleOpenChange(`${field.name}`)}
                    >
                      <PopoverTrigger asChild>
                        <FormControl>
                          <Button
                            variant="outline"
                            role="combobox"
                            className={cn(
                              "w-full justify-between",
                              !field.value && "text-muted-foreground",
                            )}
                          >
                            {field.value
                              ? languages.find(
                                  (language) => language.id === field.value.id,
                                )?.title
                              : "Select language"}
                            <TbCaretUpDownFilled className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                          </Button>
                        </FormControl>
                      </PopoverTrigger>
                      <PopoverContent className="w-[200px] p-0">
                        <Command>
                          <CommandInput
                            placeholder="Search framework..."
                            className="h-9"
                          />
                          <CommandEmpty>No framework found.</CommandEmpty>
                          <CommandGroup>
                            {languages.map((language) => (
                              <CommandItem
                                value={language.title}
                                key={language.id}
                                onSelect={() => {
                                  form.setValue(`items.${index}.category`, {
                                    title: language.title,
                                    id: language.id,
                                  });
                                  setOpenPopover(false);
                                }}
                              >
                                {language.title}
                                <CheckIcon
                                  className={cn(
                                    "ml-auto h-4 w-4",
                                    language.id === field.value
                                      ? "opacity-100"
                                      : "opacity-0",
                                  )}
                                />
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </Command>
                      </PopoverContent>
                    </Popover>
                    <FormMessage />
                  </FormItem>
                )}
              />

my second comboBox:

<FormField
                control={form.control}
                name={`items.${index}`}
                render={({ field }) => (
                  <FormItem className="flex w-full flex-col">
                    <FormLabel>Category</FormLabel>
                    {field.name}
                    <Popover
                      open={openPopover === `${field.name}`}
                      onOpenChange={() => handleOpenChange(`${field.name}`)}
                    >
                      <PopoverTrigger asChild>
                        <FormControl>
                          <Button
                            variant="outline"
                            role="combobox"
                            className={cn(
                              "w-full justify-between",
                              !field.value && "text-muted-foreground",
                            )}
                          >
                            {field.value
                              ? languages.find(
                                  (language) => language.id === field.value.id,
                                )?.title
                              : "Select language"}
                            <TbCaretUpDownFilled className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                          </Button>
                        </FormControl>
                      </PopoverTrigger>
                      <PopoverContent className="w-[200px] p-0">
                        <Command>
                          <CommandInput
                            placeholder="Search framework..."
                            className="h-9"
                          />
                          <CommandEmpty>No framework found.</CommandEmpty>
                          <CommandGroup>
                            {languages.map((language) => (
                              <CommandItem
                                value={language.title}
                                key={language.id}
                                onSelect={() => {
                                  // form.setValue(
                                  //   `items.${index}.name`,
                                  //   language.title,
                                  // );
                                  form.setValue(`items.${index}`, {
                                    name: language.title,
                                    id: language.id,
                                    // ...field.value,
                                  });
                                  setOpenPopover(false);
                                }}
                              >
                                {language.title}
                                <CheckIcon
                                  className={cn(
                                    "ml-auto h-4 w-4",
                                    language.id === field.value
                                      ? "opacity-100"
                                      : "opacity-0",
                                  )}
                                />
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </Command>
                      </PopoverContent>
                    </Popover>
                    <FormMessage />
                  </FormItem>
                )}
              />