如何修复附加字段，删除并在渲染字段上显示

如何解决如何修复附加字段，删除并在渲染字段上显示

const [application,setApplication] = useState([
        {
          id: 1,code: 'adr',name: 'android',role: 'user'
        }])

  const [appRole,setAppRole] = useState([
    {
      id: null,code: null,name: null,role: null
    }
  ]);

      {
        label: 'Department',name: 'dept',type: 'select',config: {
          labelKey: "name",valueKey: "code",multiple: false
        },placeholder: 'Select Department (optional)',rule: yup.string(),},{
        label: (
          <div className="flex items-center">
            <label className="flex-1">Application - Role</label>
            <div className="text-right">
              <ButtonGroup>
                <IconButton icon={<Icon icon="plus" />} onClick={() => appendAppRole()} />
              </ButtonGroup>
            </div>
          </div>
        ),name: 'applications',renderer: (data) => {
          const { control,register,errors } = useFormContext();

          return (
            <div className="flex flex-col w-full">
              {
                appRole.map((item,index) => (
                  <div key={index} className="flex flex-col pb-2 -items-center">
                    <div className="flex pb-2 w-full">
                      <SelectPicker
                        placeholder="Select Application"
                        data={application['data']}
                        labelKey="name"
                        valueKey="code"
                        style={{ width: '100%' }}
                        onChange={(value) => control.setValue('applications',_setAppRole(value,index,'code'))}
                        value={control.getValues()['applications']?.code}
                      />
                      <SelectPicker
                        placeholder='Select Role'
                        data={roles}
                        labelKey='name'
                        valueKey='code'
                        style={{ width: '100%' }}
                        onChange={(value) => control.setValue('sbus','role'))}
                        value={control.getValues()['applications']?.code}
                      />
                    </div>

                    <div>
                      <button onClick={() => removeAppRole(index)}>DELETE</button>
                    </div>
                  </div>
                ))
              }
            </div>
          )
        }
      }


  const appendAppRole = () => {
    let i = 0;
    for (i = 0; i < noOfAppRole; i++) {
      setAppRole(arr => [...arr,{
        id: null,role: null
      }]);

      return appRole;
    }
  }

  const removeAppRole = (index) => {
    console.log(appRole.indexOf(index))
    if (index > -1) {
      appRole.splice(index,1)
    }
  }

  const _setAppRole = (value,idx,status) => {
    appRole[idx][status] = value;
    setAppRole(appRole);
    return appRole;
  }

这里的问题是当我尝试添加或追加时，当我关闭抽屉时，它不会重置为一个字段。还是两个。

它应该在线：

[{
            id: null,role: null
          }]

代替

[{ id：空， 代码：空， 名称：空， 作用：空 },{ id：空， 代码：空， 名称：空， 作用：空 }]

打开抽屉时它应该只有一个字段。

例如我有一个数据

const [rowData,setRowData] = useState([{
      name: 'jake',application: [{id: 3,code: "i1",name: "IOS",role: "USER"
}]
    }])

如何在 select 上显示数据，其中数据角色应显示在 select 角色上，而 rowData 应用程序应在数据存在时显示在 select 应用程序上