How can I display different links in react--modal-video?

Question

I am having one issue displaying different video links. Here is my component using react-modal-video. When I inspect the page in chrome, I see that the id is attached to the video, but, it keeps playing the first link. I have my data in a separate js file like this...

I'm assuming that when I click open, it is opening every modal at once, therefore displaying the first video. I would appreciate any help!

const projectdata = [
    {
    img: applitrack,
    title: 'appliTrack',
    video: 'NpdoTEbQ_2g',
    js: faJs,
    python: faPython,
    css: faCss3Alt,
    gitLink: 'https://github.com/braddonako/jobTracker_django'
    },
    {
    img: brog,
    title: 'brog',
    video: 'k6v3so0ZiFk',
    js: faJs,
    react: faReact,
    node: faNode,
    css: faCss3Alt,
    gitLink: 'https://github.com/braddonako/Brog-react'
    },
    {
    img: whatToEat,
    title: 'whatToEat',
    video: 'UTZLh9Jl6ZU',
    js: faJs,
    react: faReact,
    python: faPython,
    css: faCss3Alt,
    gitLink: 'https://github.com/braddonako/capstone-front-end'
    },
    {
    img: blackjack,
    title: 'TfMS3gqyA84',
    video: 'NpdoTEbQ_2g',
    js: faJs,
    css: faCss3Alt,
    html: faHtml5,
    gitLink: 'https://github.com/braddonako/blackjack-project1'
    },
    {
    img: rockhounding,
    title: 'rockhounding',
    video: 'NpdoTEbQ_2g',
    js: faJs,
    css: faCss3Alt,
    html: faHtml5,
    node: faNode,
    gitLink: 'https://github.com/Jordanbrun/project2-rockhounding'
    },
    {
    img: ahaha,
    title: 'ahaha',
    video: 'NpdoTEbQ_2g',
    js: faJs,
    css: faCss3Alt,
    html: faHtml5,
    gitLink: 'https://github.com/braddonako/ahaha'
    }
    

]

export default projectdata;

    constructor(props) {
        super(props)
        this.state = {
            isOpen: false,
            video: null,
            videos: []
        }
        this.openModal = this.openModal.bind(this)
    }
    

    componentDidMount(){
        this.getAllVideos();
    }

    getAllVideos = () => {
        const allVideos = projectdata
        
        console.log(allVideos, '<--all videos')
        this.setState({
            videos: allVideos
        })
    }

    openModal(video) {
    this.setState({
        isOpen: true,
        video: video
    })
  }



    render() {

        const projects = projectdata.map((project, i) => {
            console.log(project)
            
            
            // const youtubeVideo = [];
            // youtubeVideo.push(project.video)
            // console.log(youtubeVideo)

        return (   
        <div className='my-work' id='work' key={i}>
            

          <div className='portfolio'>
              <div className='portfolio_item'>
                <img src={project.img} alt={project.img} className='portfolio__img'/>
                
                <div className='tag'>
                <div>
                <a href={project.gitLink} >
                <FontAwesomeIcon
                        icon={faGithub}
                        className='icon'
                     />
                    </a>
                     <ModalVideo key={project.video} channel='youtube' isOpen={this.state.isOpen} videoId={project.video} onClose={() => this.setState({ isOpen: false, video: null })} />
                    <button onClick={this.openModal} key={project.video}>
                    DEMO
                    </button>
                   
                </div>
                </div>
                  <div className='tech'>
                        <FontAwesomeIcon 
                        icon={project.js}
                        className='icon'
                        />          
                        <FontAwesomeIcon 
                        icon={project.python}
                        className='icon'
                        />         
                        <FontAwesomeIcon 
                        icon={project.css}
                        className='icon'
                        />       
                        <FontAwesomeIcon 
                        icon={project.react}
                        className='icon'
                        />      
                        <FontAwesomeIcon 
                        icon={project.node}
                        className='icon'
                        />   
                        <FontAwesomeIcon 
                        icon={project.html}
                        className='icon'
                        />   
                  </div>
              </div>
                
       
           </div>
        </div>
        )
    })
    return(
        <div>
        <h2 className='section__title section__title--work'>Projects</h2>
        <div className='portfolio'>
            {projects}  
        </div>
        </div>
    )
    }
}

export default Projects;```