I am trying to show some data in my modal component. However, when I pass the data as a prop to my modal I can see that I get the data on my useState hook, but I can not see while am using that in the Modal component.

Please see the code I tried.

const handleWatchOpen = (movieData) => {
    setWatchVideo(true)
    const videoItem = [...videoData, movieData ]
    setVideoData(videoItem)
}
const handleWatchClose =() => {
    setWatchVideo(false)
    setVideoData("")
}

<Button className = {classes.cardButton} size = "small" onClick = { () => handleWatchOpen(movie)}>Watch</Button>
<VideoModal watchVideo = {watchVideo} handleWatchClose = {handleWatchClose}  setVideoData ={setVideoData}/>

VideoModal.jsx

const VideoModal = ({
  watchVideo,
  handleWatchClose,
  setVideoData: { title },
}) => {
  const classes = useStyles();
  console.log(title);
  return (
    <>
      <Modal
        open={watchVideo}
        onClose={handleWatchClose}
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
      >
        <div className="modal">
          <img src="" alt="img" />
          <h1>h1 {title}</h1>
          <Button
            className={classes.cardButton}
            size="small"
            onClick={handleWatchClose}
          >
            Close
          </Button>
        </div>
      </Modal>
    </>
  );
};

export default VideoModal;

Please see the console result. It says undefined and triggers more than once when I click the watch button. I do not know why. Any help or suggestions on this, please?