I have a component with an html video:

interface VideoBoxProps {
  src: any
  classes?: string
  clickable?: boolean
}

export const VideoBox = ({src, classes, clickable}:VideoBoxProps) => <div className="video-wrapper" onClick={() => clickable ? src.play() : null}>
  <video width="100%" height="auto" className={classes}>
    <source src={src} type="video/mp4"/>
  </video>
  <img className="video-play-button" src={PlayButton} alt="play button"/>
</div>

I am using this component in parent component like this:

<VideoBox src={video} clickable/>

I importing and passing the video file like this:

import MyMovie from '../../assets/public/my_movie.mp4'

But, I am not sure how to play a video on clicking the .video-wrapper div? The src that I am passing is just a generated path to the file, and I am not sure how to then create a video object that I can play from any component then?