How can I access event variable outside of JSX component React.js?

I have a YouTube JSX component in my file.All my imports are here:

import io from "socket.io-client";import { useState, useEffect } from "react";import YouTube, { YouTubeProps } from "react-youtube";

<YouTube                    videoId={"di0MtYgeJNE"} // defaults -> ''                    //id={string} // defaults -> ''                    //className={string} // defaults -> ''                    //iframeClassName={string} // defaults -> ''                    //style={object} // defaults -> {}                    //title={string} // defaults -> ''                    //loading={string} // defaults -> undefined                    //opts={obj} // defaults -> {}                    //onReady={ready} // defaults -> noop                    onPlay={(event) => {                        console.log(event);                        console.log(event.target);                        console.log("now playing");                        console.log(YouTube.PlayerState);                        event.target.playVideo();                        event.target.pauseVideo();                        emitEvent(event); //emit play to backend here                    }} // defaults -> noop                    onPause={(event) => {                        console.log("now pausing", event);                        console.log(YouTube.PlayerState.BUFFERING);                                                //emit pause to backend here                    }                />

I want to be able to access the event related to this JSX component, so that I may call event.target.playVideo();

I'm listening to sockets in my useEffect() function and I want to call event.target.playVideo() in there depending on the socket msg I recieve.

my UseEffect function to listen to socket:(socket.io client)

useEffect(() => {        socket.on("user-played", (data) => {            console.log("other user clicked play: ");            //call event.target.playVideo() here        });    }, [socket]);

Ideally the workflow would my client here emits("play-video"). Then my backend registers that and emits that event back to client side. Then my client side would recieve("user-played") event and play the video with the play video function above.

Unfortunately I can't just call that anywhere since i need access to the relevant event variable from my YouTube component, so I'm not sure the solution.

I've heard useRef() might work but I was having some trouble with it..although I might just be using it wrong. Any help is greatly appreciated!