Display the correct CardContent in it's DialogContent - reactjs

Question

I'm trying intergrate an option to display the data of a Card it's Dialog, with there being multiple Cards.
Right now I'm getting all the data from Firebase and each record is being displayed in a Card. The problem is that the Dialog will only display the data of the last looped item in the map, not of the Card that I'm trying to display in the Dialog.
How can I get the corresponding data from a Card and put it in it's Dialog? E.g: I open the Dialog of the 4th Card and only the data of the 4th Card gets displayed
The code:
useEffect(() => {
const getEvents = async () => {
const data = await getDocs(eventsRef);
data.forEach((doc) => {
setEventList(data.docs.map((doc) => ({...doc.data(), id: doc.id})));
})
};
getEvents();
}, [])
return (
<>
<div className="stepper-title" style={{textAlign: "center"}}>
<b><h1>Aankomende afspraken</h1></b><br></br><p>Prik een afspraak die jou intereseerd</p>
</div>
<div className="event-list-container">
{
eventList && eventList.map((item, index) => {
return (
<div key={item.id}>
<Card variant="outlined" sx={{ width: 250 }}>
<CardContent>
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
{item.date}
</Typography>
<Typography variant="h5" component="div">
{item.occasion.title}
</Typography>
<Typography sx={{ mb: 1.5 }} color="text.secondary">
{item.location}
</Typography>
<Typography variant="body2">
{item.occasion.description}
</Typography>
</CardContent>
<CardActions>
card {index}
<Button onClick={handleClickOpen} size="small" itemID={item.id}>bekijken</Button>
<Dialog open={open} onClose={handleClose} PaperProps={{elevation: 1}} hideBackdrop>
<DialogContent>
<TextField
label="Titel"
defaultValue={eventList[index].occasion.title}
fullWidth
variant="standard"
/>
<TextField
label="Description"
defaultValue={eventList[index].occasion.description}
fullWidth
variant="standard"
/>
<TextField
label="Datum"
defaultValue={eventList[index].date}
fullWidth
variant="standard"
/>
<TextField
label="Locatie"
defaultValue={eventList[index].location}
fullWidth
variant="standard"
/>
<TextField
label="Naam"
defaultValue={eventList[index].organizer.name}
fullWidth
variant="standard"
/>
<TextField
label="E-mailadres"
defaultValue={eventList[index].organizer.email}
fullWidth
variant="standard"
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>terug</Button>
<Button onClick={handleClose}>Aanpassen</Button>
</DialogActions>
</Dialog>
</CardActions>
</Card>
</div>
)
})
}
</div>
</>
);