Javascript 单击添加时动态表单无法正常工作

我正在创建一个动态的表单，每次我点击添加创建一个新的元素，它一直工作得很好，直到现在.

• 我点击了一个保存按钮，我正在获取所有数据，需要 做进一步的处理.
• 当我单击保存时，我正在使用React-hook-form进行验证.
• 因此，第一次当字段为空时，我单击保存，它会显示错误(字段不能为空)
• 然后，当我在输入字段中输入时，它不是接受我按下的第一个字符，而是接受第二个字符.
• 当我在输入一个单词后按Backspace时也会发生同样的情况，最后一个字符没有被删除.

What I am doing个

• 下面是我的零钱，我考了三分，e,index and name分

   const handleInputChange = (e, index, name) => {
   const { value } = e.target;
   console.log(name);
   const list = [...inputList];
   list[index][name] = value;
   setInputList(list);};
  

• 我的Html

   < input
     type = "text"
     placeholder = "Display Name"
     name = {
       `employees[${i}].firstName`
        }
     className = {
       errors.employees &&
       errors.employees[i] &&
       errors.employees[i].firstName ?
       'form-control error_input' :
       'form-control'
     }
     onChange = {
       (e) => handleInputChange(e, i, 'firstName')
    }
      value = {
       li.firstName
       }
     ref = {
    register({
       required: 'First Name is required',
    })
  }
  

  /&gt；

The issue个

• 当输入字段为空时，第一次点击Save.

• 输入Test--第一次不需要按两次t

• 输入测试后，按Backspace删除它将删除TES，但要删除T，需要按两次.

我只是想知道是什么问题，我写的代码我想我没有遗漏任何东西.

My working code个