Repeating same input not showing - reactjs

Question

I'm making an application using Laravel and React.
I made an event in laravel to display data in real time and I'm using "React Transition Group" to add an animation to the added data.
The problem is, when I'm adding data normally without this package, the data is showing correctly, but once added, the animation and data are working fine except when repeating the same data.
For example if I add in {patient.nom} and {patient.prenom} values such as John & Doe. They will appear, but if I put them again, they will not, but in database they are registered perfectly.
After some tests I'm pretty sure it has to do with the key in
<CSSTransition
key={patient.nom,patient.prenom}
timeout={500}
classNames="item"><CSSTransition>
Whole component :
import React,{Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import Echo from "laravel-echo";
import {
ListGroup,
Button,
} from 'react-bootstrap';
import {
CSSTransition,
TransitionGroup,
} from 'react-transition-group';
import './styles.css';
class Patient extends React.Component {
constructor(props) {
super(props)
this.state = {
patients : [],
};
}
componentDidMount() {
axios.get('api/patients')
.then(response => {this.setState({patients: response.data})})
.catch(err => console.log(err));
window.Echo.channel('home')
.listen('NewPatient', newPatientData => {
this.setState({
patients: this.state.patients.concat(newPatientData)
})
}, e => {
console.log("Error", e)
})
}
render() {
return (
<div>
<TransitionGroup>
{this.state.patients.slice(0).reverse().map(patient =>
<CSSTransition
key={patient.nom,patient.prenom}
timeout={500}
classNames="item">
<ListGroup.Item>
{patient.nom} {patient.prenom}
</ListGroup.Item>
</CSSTransition>
)}
</TransitionGroup>
</div>
)
}
}
export default Patient;

Answer 1

Solved. As I read in an article:
Generate a unique id for every item and use it as key when
rendering the list.
So I didn't have an unique id in my list, because the event that was broadcasting did not send id.
So in the final result in the key I should have key={patient.id} , like that every element in the list would have a unique id from database.