I am trying to make a video play-able model when click on the video link but can't understand what to do. Tried my best but can't reach at solution. I have picked a logic from internet but didn't work. I have also commented out the section of modal.Thanks in Advance...

code ................................................................

import React,{useState, useEffect } from "react";
import './App.css';
import Axios from "axios";
import ModalVideo from 'react-modal-video';///


function App() {

const [isOpen, setOpen] = useState(false)///
const [resdata, setresdata] = useState([])
const showurl = 'http://localhost/react%20project/newapp/src/show.php?function=show';

const updtcomp = () => {
  Axios.get(showurl) 
  .then(res =>{
    setresdata(res.data)
    console.log(res)
  })
  
  .catch(err => {
      console.log(err)
    
})
}

  useEffect(() => {
      Axios.get(showurl) 
      .then(res =>{
        setresdata(res.data)
        console.log(res)
      })
      
      .catch(err => {
          console.log(err)
        })
  }, [])
  console.log(resdata)

return( 
<div className="App"><br/>
          
      <div className="tblfrm">      
        <table>
            <thead>
              <tr>
                <td>ID</td>
                <td>Name</td>
                <td>Date</td>
                <td>V-Links</td>
                <td>Action</td>
              </tr>
            </thead>
            <tbody>
              { resdata.length > 0 && resdata.map( resdata => (
              <tr> 
              <td key={resdata.Id}>{resdata.Id}</td>
                <td key={resdata.Name}>{resdata.Name}</td>
                <td key={resdata.date}>{resdata.date}</td>

    {/* trying to make a video playable modal on click of the link  */}
                
                <td key={resdata.video}>
                <a onClick={()=> setOpen(true)} href={resdata.video}> 
                {resdata.video} </a>
                <ModalVideo isOpen={isOpen} onClose={()=> setOpen(false)}/>
                </td> 

                <td>
                <button>EDIT</button> &nbsp;
                <button>DELETE</button>
                </td>
                </tr>
              ) ) }
            </tbody>      
        </table>
      </div>      
</div>   
  )
}
export default App;