Popover with id data in list (React, Material UI) - reactjs

Question

I have a table list with first name, last name and email. The email section is a clickable popover SimplePopper:
<TableCell>{list.first_name}</TableCell>
<TableCell>{list.last_name}</TableCell>
<TableCell><SimplePopper /></TableCell>
I'd like the popover to only display the email related to the id at the row level, but at the moment it displays all emails. Is there a simple way to pass something on <SimplePopper /> so I see the related emails to each first and last name?
SimplePopper calls this function:
function PostPopover() {
return (
<div>
{PostData.map((list, index)=>{
return <div>
{list.email}
</div>
})}
</div>
)
}
Edit: added SimplePopper code
function PostPopover() {
return (
<div>
{PostData.map((list, index)=>{
return <div>
{list.email}
</div>
})}
</div>
)
}
const useStyles = makeStyles((theme) => ({
paper: {
border: '1px solid',
padding: theme.spacing(1),
backgroundColor: theme.palette.background.paper,
},
}));
export default function SimplePopper() {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const open = Boolean(anchorEl);
const id = open ? 'simple-popper' : undefined;
return (
<div>
<button aria-describedby={id} type="button" onClick={handleClick} color="primary">
Show email clicking here
</button>
<Popper id={id} open={open} anchorEl={anchorEl}>
<div className={classes.paper}><PostPopover />.</div>
</Popper>
</div>
);
}
Edit: PostData structure (1,000 fake records)
[{"id":1,
"first_name":"Geraldine",
"last_name":"Graal",
"email":"ggraal0#indiegogo.com"},
{"id":2,
"first_name":"Farris",
"last_name":"Sowten",
"email":"fsowten1#blogger.com"}]