react-hook-form删除输入块时显示异常

使用react-hook-form结合antd做表单时，想要做一个可增加和删除输入框的功能，如下图

然而会存在删除第二行时，显示的却是少了第三行的情况：

变成：

其实查看表单结果，确实是删除了第二行，但页面显示的效果感觉像是删除了第三行，其实是代码块的key值问题，给最外层循环绑定了key值就能解决（这里是Space这一层）：

{fields.map((field, index) => (  
    <Space key={field.id}>       
       <Controller 
            name={`${props.name}[${index}]`}
            control={props.control}
            defaultValue={field.val}
            key={props.defaultValue}
            render={(data)=>{
               return<InputNumber
                          style={{width:150}}
                          defaultValue={field.val}
                          key={index}
                          placeholder='请输入测评ID'
                             onChange={v=>onChange(v,index,data)}
                      />
             }}
       />
       <MinusCircleOutlined onClick={() => remove(index)} style={{marginRight:20}}/> 
      </Space>                                  
))}