Function NestedArray

app/src/useWatchUseFieldArrayNested.tsx:18–119

({
  control,
  index,
}: {
  control: Control<FormValues>;
  index: number;
})

};

function NestedArray({
  control,
  index,
}: {
  control: Control<FormValues>;
  index: number;
}) {
  const { fields, append, prepend, swap, move, remove, insert, update } =
    useFieldArray<FormValues, 'test.0.keyValue'>({
      name: `test.${index}.keyValue` as 'test.0.keyValue',
      control,
    });
  const value = useWatch({
    name: 'test',
    control,
  });
  const renderCountRef = React.useRef(0);
  renderCountRef.current++;

  return (
    <div>
      <div>
        {fields.map((item, i) => (
          <Controller
            key={item.id}
            render={({ field }) => <input {...field} aria-label={'name'} />}
            name={`test.${index}.keyValue.${i}.name`}
            control={control}
          />
        ))}
      </div>

      <button
        id={`nest-append-${index}`}
        type="button"
        onClick={() => append({ name: 'append' })}
      >
        append
      </button>

      <button
        id={`nest-prepend-${index}`}
        type="button"
        onClick={() => prepend({ name: 'prepend' })}
      >
        prepend
      </button>

      <button
        id={`nest-swap-${index}`}
        onClick={() => swap(1, 2)}
        type="button"
      >
        swap
      </button>

      <button
        id={`nest-move-${index}`}