react-hook-form id未与useFieldArray一起保存

import React from 'react';
import { useForm, useFieldArray } from 'react-hook-form';

const MyForm = () => {
  const { register, control, handleSubmit, setValue } = useForm();
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'items', // 表单数据中保存数组的字段名
  });

  const onSubmit = (data) => {
    // 提交表单数据
    console.log(data);
  };

  const addItem = () => {
    // 添加表单项
    append({ id: Math.random(), name: '', value: '' });
  };

  const removeItem = (index) => {
    // 删除表单项
    remove(index);
  };

  const handleInputChange = (index, event) => {
    // 更新表单项的值
    const { name, value } = event.target;
    setValue(`items[${index}].${name}`, value);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((item, index) => (
        <div key={item.id}>
          <input
            type="text"
            name={`items[${index}].name`}
            placeholder="Name"
            defaultValue={item.name}
            onChange={(event) => handleInputChange(index, event)}
            ref={register()}
          />
          <input
            type="text"
            name={`items[${index}].value`}
            placeholder="Value"
            defaultValue={item.value}
            onChange={(event) => handleInputChange(index, event)}
            ref={register()}
          />
          <button type="button" onClick={() => removeItem(index)}>Remove</button>
        </div>
      ))}
      <button type="button" onClick={addItem}>Add Item</button>
      <input type="submit" value="Submit" />
    </form>
  );
};

export default MyForm;