IS THERE A WAY TO PASS A DATA FROM PARENT COMPONENT TO CHILD COMPONENT WITHOUT HAVING THE NEED TO CALL AND DISPLAY THE CHILD TO THE PARENT COMPONENT? [closed]

I’m new to react JS and i am trying to pass a data from a component when i click it to another component..

for example, i have an image(parent) and when i click on it, it would open a new component(child) with the data from the parent.. HOW CAN I DO THAT ON REACT JS?

this is the container

<div className="Videos">
            <h2> Available Lessons </h2>
            <div className="Videos__uploads">

                {
                    vids.map(({ id, data }) => (
                        <Link key={id} to={{ pathname: `/play/${id}`, data: data}}>
                            {console.log(id)}
                            <VideoCard
                                key={id}
                                videoTitle={data.videoTitle}
                                videoDate={data.videoDate}
                                videoCaption={data.videoCaption}
                                videoUrl={data.videoUrl}
                            />
                            {console.log(data.videoUrl)}
                        </Link>
                    ))

                }

            </div>

this is the Parent

function VideoCard({ videoTitle, videoCaption, videoDate, videoUrl}) {

    return (
        <div className="videoCard">
            <img className="videoCard__thumbnail"
                src={Dummy}
                alt="Thumbnail"
                height="200px"
            />
            <div className="video__info">
                {/* <Avatar className="video__avatar"
                    alt={channel}
                    src={chan_img} /> */}
                <div className="video__text">
                    <h4>{videoTitle}</h4>
                    <p>
                        {videoDate}
                    </p>
                    <p>{videoCaption}</p>

                </div>
            </div>

            <VideoPlayer videoUrl={videoUrl}/>
        </div>
    )
}

and this is the child

function VideoPlayer({ key, videoTitle, videoUrl}) {
    
    return (
        <div className="videoPlayer__container">
            <h1>Helloo</h1>
            {console.log(videoUrl)}
            <ReactPlayer
                key={key}
                id="videoPlayer"
                url={videoUrl}
                height="100%"
                width='100%'
                playing={true}
                controls={true}
                volume={1}
                progressInterval={5000}
                pip={true}
            />
    </div>
)

}