Material ui Dialog onClick deletes only last index

Question

So I've created a get request, which shows all the exercises and the options to edit (which will redirect to another url) and delete. I wanted to use material ui's Dialog, so there will be a confirmation before deleting. The problem is that, say I have 3 exercises and want to delete exercise with index 1, when click the on delete button it appears the last index in the element i.e the last exercise, although I want to delete the second. How can I fix that? And also can I move Dialog in another file for more clear coding?

Exercises.js

const Exercises = () => {
const { categories, deletedCategories, error, isLoading, exercises, open, handleClickOpen, handleClose, deleteExercise } = useFormExercises();
const [showCategories, setShowCategories] = useState(false);

if (isLoading) {
    return <div>Loading...</div>
}
if (error) {
    return <div>There was an error: {error}</div>
}

return (
    <Grid container  className='content' >
        <Card className='exerciseCard'>
            <h1>Exercises</h1>
                <FormControlLabel sx={{ width:'500px'}}
                    label="Show Categories"
                    control={
                        <Checkbox
                            sx={{ml:2}}
                            checked={showCategories}
                            onChange={(event) => setShowCategories(event.target.checked)}
                        />
                    }
                />
                <Button sx={{pr:6}}  variant='fab' href={('/exercises/add')}>
                    <Add />
                </Button>
            <Divider />
            <Grid className="exerciseContent" >
            {exercises.map(exercise => (
                <Card>
                    <tr key={exercise.id}>
                <List>
                    <ListItem
                        key={exercise.id}
                        secondaryAction={
                            <IconButton onClick={handleClickOpen}>
                                <Delete />
                            </IconButton>
                        }>
                        <Button 
                        sx={{mr:4}}
                        href={(`/exercises/edit/${exercise.id}`)} >
                            <Edit />
                        </Button>
                        <ListItemText sx={{justifyContent:'center', width:'400px'}}
                            primary={exercise.exercise_name}
                            secondary={showCategories ? exercise["exerciseCategories.category_name"] : null}
                        />
                    </ListItem>
                    <Dialog
                        open={open}
                        onClose={handleClose}
                        style={{ borderColor: 'red' }}
                    >
                        <Box sx={{ borderTop: 3, color: 'red' }}>
                            <DialogTitle sx={{ color: 'black', backgroundColor: 'gainsboro', pl: 11 }}>
                                Delete Exercise
                            </DialogTitle>
                            <DialogContent>
                                <DialogContentText color='black' >
                                    <Warning fontSize='large' color='error' id='warning' />
                                    Are you sure you want to delete the exercise: {exercise.exercise_name} ?
                                </DialogContentText>
                            </DialogContent>
                            <DialogActions >
                                <Button variant='contained' onClick={() => deleteExercise(exercise.id)} autoFocus>
                                    Yes
                                </Button>
                                <Button variant='outlined' onClick={handleClose}>No</Button>
                            </DialogActions>
                        </Box>
                    </Dialog>
                </List>
                </tr>
                </Card>
            ))}
            </Grid>
        </Card>
    </Grid>
)

}

export default Exercises

My delete function

useFormExercises.js

...
    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    }

    const deleteExercise = async (id) => {
        try {
            await fetch(`${BASE_URL}/exercises/${id}`, {
                method: "DELETE",
            }).then(response => {
                setExercises(exercises.filter(exercise => exercise.id !== id))
                return response.json()
            })
        } catch (error) {
            console.log(error)
        }
    }

And if another thing seems of, please share your opinion! Thanks in advance!