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>                                  
))}