Multiple buttons triggering the same modal component

Solution 1:

Instead of using

 <div key={video.id}>

can you use,

<List dense>
          {videos?.map((video,i) => (
            <div key={i}>
              <ListItem onClick={() => setModalOpen(true)} button>
                <ListItemText primary={video.title} />
              </ListItem>
              <Divider />

              <VideoModal
                open={modalOpen}
                handleClose={() => handleCloseModal()}
                video={video}
                video_id={video.id}
              />
            </div>
          ))}
        </List>