Multiple buttons triggering the same modal component

I have an videos array, which in turn has objects of type Video (typing below).

I need that when clicking on the button corresponding to a specific video, I can open only one modal with the information of the clicked video.

interface VideosInfo {
  id: number;
  title: string;
  url: string;
  quiz: boolean;
}

interface PagePros {
  videos: VideosInfo[]
}

Below is the component that renders the array of videos through a map, notice that inside the map, I have an onClick function that calls the modal.

import { VideoModal } from '../index';
import { useVideos } from '../../../../hooks/Videos';

export const Videos: React.FC<VideoProps> = ({ module_id }) => {
  const [modalOpen, setModalOpen] = useState<boolean>(false);

  const { getVideos, videos, loadingVideos } = useVideos();

  const handleCloseModal = () => {
    setModalOpen(false);
  };

  const VideosData = () => {
    if (videos.length) {
      return (
        <List dense>
          {videos?.map(video => (
            <div key={video.id}>
              <ListItem onClick={() => setModalOpen(true)} button>
                <ListItemText primary={video.title} />
              </ListItem>
              <Divider />

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

    if (!videos.length && !loadingVideos) {
      return (
        <Typography variant="body1">
          Não existem vídeos cadastrados neste módulo.
        </Typography>
      );
    }

    return <LoadingScreen text="Carregando vídeos..." />;
  };

  useEffect(() => {
    getVideos(module_id);
  }, [module_id, getVideos]);

  return (
    <Grid container spacing={2}>
      <Grid item xs={12} md={12}>
        <VideosData />
      </Grid>

      <Grid item xs={12} md={12}>
        <Button variant="text" color="primary">
          Novo Vídeo
        </Button>
      </Grid>
    </Grid>
  );
};

And below the VideoModal component:

export const VideoModal: React.FC<ModalProps> = ({
  video,
  open,
  handleClose,
  video_id,
}) => {
  console.log('videos modal', video);

  return (
    <Dialog
      open={open}
      aria-labelledby="form-dialog-title"
      onClose={handleClose}
    >
      <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
      <DialogContent>
        <h2>test</h2>
      </DialogContent>
    </Dialog>
  );
};

I understand that the modal uses the “open” property to define whether it is open or not, but when I click the button and perform the setModalOpen, it renders a modal for each object in the array. I don’t understand how I could assemble this correctly.