Accidentalmente escribí algunos códigos incorrectos hoy y me gustaría saber por qué React me muestra ese resultado.

Mi código es algo como esto:

 class Prova extends React.Component { constructor (props) { super(props); this.state = { people : [], counter : 0, person : { name: "Michele", surname: "Scavino" } } } addPeople = () => { this.state.person["id"] = this.state.counter; this.state.people = [ ...this.state.people, this.state.person ]; this.setState({counter: this.state.counter + 1}); } render() { return ( <div> { this.state.people?.map(el => { return ( <div key={el.id}> {el.name} {el.surname} {el.id} </div> ) }) } <br /> <br /> <br /> <br /> <button onClick={this.addPeople}>Add person</button> </div> ); } } ReactDOM.render( <Prova />, document.getElementById('root') );

El error aquí es que cada vez que agrego una nueva persona con el botón correspondiente, copio la misma referencia del mismo objeto en la matriz y cuando voy a cambiar la ID de un elemento de la matriz, todos los ID de los elementos de la matriz cambiará, usando el operador de propagación de esta manera. Pero el problema aquí es otro. Cada vez que agrego una nueva persona, la visualización de nuevos elementos es muy extraña y no puedo entender por qué. Si hago clic en el botón seis veces, debería mostrarme 6 filas, pero en realidad no sucede. ¡¡¡Literalmente flipa!!! Sé que estoy tratando de mostrar una lista de elementos con las mismas claves, pero no puedo darme cuenta de por qué ocurre este problema... ¿Hay algún experto que pueda responder a mi pregunta adecuadamente o vincularme con algunos recursos para encontrar la respuesta? a mi pregunta? Realmente le sugiero que copie y ejecute mi código para ver el error con sus ojos. ¡Gracias!