Video Follow on Mouse Move in React - reactjs

Question

I have this javascript function that autoplays a Vimeo video and attaches to the cursor when hovering over an element. I'm trying to figure out how to do this in React but I'm not having any luck. Originally, I was using Froogaloop and Vimeo player api which seemed to work just fine, but not in react.
Here is the code below
Script
document.getElementById("div").addEventListener("mousemove", function() {
myFunction(event);
});
var mouse;
var cursor = document.getElementById("cursor");
function myFunction(e) {
mouseX = e.clientX;
mouseY = e.clientY;
cursor.style.left = (mouseX - 55) + "px";
cursor.style.top = (mouseY - 55) + "px";
}
// play video on hover
const iframe = document.getElementById('video');
// $f == Froogaloop
const player = $f(iframe);
// bind events
var mouseEntering = document.getElementById("div");
mouseEntering.addEventListener("mouseenter", function() {
player.api("play");
});
var mouseLeaving = document.getElementById("div");
mouseLeaving.addEventListener("mouseleave", function() {
player.api("unload");
});
HTML
<div id="div" class="div">
<div id="cursor" class="cursor">
<iframe id="video" class="video" src="https://player.vimeo.com/video/649593940?api=1&loop=1&muted=1" width="400px"
height="300px" frameborder="0"></iframe>
</div>
</div>
CSS
.wrapper{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(241px,1fr));
gap: 20px;
}
.div:hover{
cursor:pointer;
}
.div:hover .cursor{
visibility:visible;
}
.cursor {
visibility:hidden;
position: absolute;
transform:translate(80px,50px);
background:red;
backface-visibility: hidden;
z-index: 9999999;
pointer-events: none; /* pointer-events: none is needed */
cursor: none;
}
.div {
background: blue;
height:200px;
width:100%;
cursor: none;
}
Here is a full working example on codepen
Any help on how to do this in react would be awesome.