I got a list of Text fields like this and a delete button for each field.

{Object.keys(customProperties).map((item, index) => {
          return <Controller key={index}
            render={({ field }) => <TextField label={item} {...field} isDeleteBtn={true} onDeleteBtnClick={onDeleteField} />}
            name={customProperties.${item}}
            control={control}
          />;
        })}

My Delete code looks like

const onDeleteField = (customPropertyKey) => {
    const { ...properties } = customProperties;
    delete properties[customPropertyKey];
    setValue('customProperties',  properties);
  };

But the setValue('customProperties', properties); is removing the key but the values are got interchanged.

eg:  customProperties = {
      firstName: 'john',
    secondName: 'don'
}

After deleting firstName

it results in

customProperties = {
    secondName: 'John'
}

Any help please