Tengo un componente con un video html:

 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>

Estoy usando este componente en el componente principal de esta manera:

 <VideoBox src={video} clickable/>

Importo y paso el archivo de video así:

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

Pero, no estoy seguro de cómo reproducir un video al hacer clic en el .video-wrapper div . El src que estoy pasando es solo una ruta generada al archivo, y no estoy seguro de cómo crear un objeto de video que pueda reproducir desde cualquier componente.