How to implement mouseEnter and mouseout play effect video in react? - reactjs

Question

I am hoping someone can help me. I am trying to apply the mouseenter and mouseout effect to these videos. I am having difficulty accomplishing that, I have tried using javascript in the HTML section of my react code by calling document.querySelectorAll('.clip'), but nothing works. I am truly lost and I thank you in advance for your time.
import React from 'react';
import './Project.css'
import video from '../videos/Screen Recording 2022-04-01 at 8.22.57 PM.mov';
import video1 from '../videos/Screen Recording 2022-04-01 at 8.23.25 PM.mov';
import video2 from '../videos/Screen Recording 2022-04-01 at 8.25.20 PM.mov';
import video3 from '../videos/Screen Recording 2022-04-01 at 8.27.28 PM.mov';
import video4 from '../videos/Screen Recording 2022-04-01 at 8.28.35 PM.mov';
import video5 from '../videos/Screen Recording 2022-04-01 at 8.30.37 PM.mov';
import video6 from '../videos/Screen Recording 2022-04-01 at 8.34.30 PM.mov';
import video7 from '../videos/Screen Recording 2022-04-03 at 3.51.52 AM.mov';
import video8 from '../videos/Screen Recording 2022-04-03 at 3.48.52 AM.mov';
const Project = ()=> {
return (
<div className='project'>
<div className='container'>
<div className='project-wrapper'>
<div className='project-content'>
<h1><span className='span'>3.</span> Past Projects</h1>
<div className='project-content'>
<div className='box'>
<video
className='clip' src={video2} muted type='video/mp4' loop>
</video>
</div>
<div className='box'>
<video className='clip' src={video8} muted type='video/mp4' loop>
</video>
</div>
<div className='box'>
<video className='clip' src={video6} muted type='video/mp4' loop >
</video>
</div>
<div className='box' >
<video className='clip' src={video} muted type='video/mp4' loop >
</video>
</div>
<div className='box'>
<video className='clip' src={video4} muted type='video/mp4' loop >
</video>
</div>
<div className='box'>
<video className='clip' src={video5} muted type='video/mp4' loop >
</video>
</div>
<div className='box'>
<video className='clip' src={video3} type='video/mp4' loop >
</video>
</div>
<div className='box'>
<video className='clip' src={video7} muted type='video/mp4' loop >
</video>
</div>
<div className='box'>
<video className='clip' src={video1} muted type='video/mp4' loop >
</video>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default Project

Answer 1

All you have to do is create a ref and assign the ref to a video element and onMouseEnter event play video and onMouseLeave pause video make this a component and sent video src as a prop which returns that, hope you understand what I mean.
const ref = useRef(null);
const handlePlayVideo = () => {
ref.current.play();
}
const handlePauseVideo = () => {
ref.current.pause();
}
return (<video ref={ref}>
<source src={video} type='video/mp4' onMouseEnter={handlePlayVideo} onMouseLeave={handlePauseVideo}/>)
</video>