Issue with dynamically adding and removing fields in React form using react-hook-form

Question

I'm working on a React form where users can dynamically add and remove fields for vehicle damage (dommageVehicules) using the react-hook-form library. I've implemented this functionality, but I'm encountering an issue where the values of dynamically added fields are not being submitted correctly.

{vehiculeFields.map((field, index) => (
  <FormField
    control={form.control}
    key={field.id}
    name={`dommageVehicules.${index}.type_vehicule`}
    render={({ field }) => (
      <div className="flex flex-col gap-4">
        <FormItem>
          <FormLabel className={cn(index !== 0 && 'sr-only')}>
            Dommage Vehicule
          </FormLabel>
          <FormDescription>Type du vehicule</FormDescription>
          <FormControl>
            <Input {...field} />
          </FormControl>
          <FormMessage />
        </FormItem>
        {/* Other form fields for classe and ordre */}
      </div>
    )}
  />
))}
<Button
  type="button"
  variant="outline"
  size="sm"
  className="mt-2 w-full"
  onClick={() => appendVehicule({ value: '' })}
>
  Ajouter un dommage Vehicule
</Button>

I tried to submit but it's not going through