How to change the value of a state object? - reactjs

Question

I created an add button for adding new objects to the state. The logic is firstly, copy the last object of the state and after add at the end of it.
I can write the code so far but the problem is, I have to change the value and the key of the objects.
Note: I have to change the keys because I'm creating input fields with the keys and they should be unique.
This is my code :
addField() {
const index = (this.state?.fields.length)
console.log("state: ", this.state)
const newFields = [this.state.fields[index]].fill(this.state.fields[index - 1])
this.setState(
{
fields: [...this.state.fields, ...newFields],
},
() => {
console.log("updated state", this.state);
}
);
}
outputs:
state:
{
"fields": [
[
{
"key": "input_field_name",
"value": "This is a value"
},
{
"key": "field_name",
"value": "field name"
},
{
"key": "datatype",
"value": "text"
}
],
[
{
"key": "input_field_name",
"value": "This is a value 2"
},
{
"key": "field_name",
"value": "field name's value 2"
},
{
"key": "datatype",
"value": "text"
},
{
"key": "Datatype",
"value": "Label 2"
}
]
]
}
updated state:
{
"fields": [
[
{
"key": "input_field_name",
"value": "This is a value"
},
{
"key": "field_name",
"value": "field name"
},
{
"key": "datatype",
"value": "text"
}
],
[
{
"key": "input_field_name",
"value": "This is a value 2"
},
{
"key": "field_name",
"value": "field name's value 2"
},
{
"key": "datatype",
"value": "text"
},
{
"key": "Datatype",
"value": "Label 2"
}
],
[
{
"key": "input_field_name",
"value": "This is a value 2"
},
{
"key": "field_name",
"value": "field name's value 2"
},
{
"key": "datatype",
"value": "text"
},
{
"key": "Datatype",
"value": "Label 2"
}
]
]
}
my state:
interface IDetailsPageState {
fields: IFieldDefinition[][];
activeFields: {
key: number;
fields: IFieldDefinition[];
};
}
How can I change the key and value of these objects?
<div key={`${this.state.activeFields.key}-${field.key}`}>
<TextInput config={inputConfig} bindings={inputBindings}></TextInput>
</div>