React-hook-form shows exception when deleting input block

When using react hook form--binding form antd do, want to do a increase input box and delete functions, as shown below

, however there may delete the second row, but it is less a display of the third row of the situation:

to become :

In fact, when viewing the form result, the second line is indeed deleted, but the effect of the page display feels like the third line is deleted. In fact, it is the key value problem of the code block, which can be solved by binding the key value to the outermost loop. (Here is the Space layer):

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