Need help on React js sending state as props

I am new to React js... I need your help as I got stuck in the below code;

-- I want to pass the 'clicked' State to Playmovie.js component, which is a state component --?? What are the options in react to pass the state of the component to children component. (Note: I don't want to pass it under component return, like because, I do not want to render it on this component.

In below code, Movie.js component, I used axios and made a network call to get the data from server and stored the data in the "movies" using useState and render it using map method.

In the rendered component (Movie.js) I have added onClick function to get the "ID" of the object I got through mapping and using filtered method I have stored that clicked Div ID in "clicked" State.

import React, {useEffect, useState} from 'react'
import './card.css'
import axios from '../Axios'
import {imageURL} from '../constant/Constants'
import PlayMovie from './PlayMovie'

function Movie(props) {
    const [movies, setMovies] = useState([])
    const [clicked, setClicked] = useState('');
 

    useEffect(() => {
        axios.get(props.url).then((response)=>{
           
            setMovies(response.data.results)
            console.log(movies)
           
        }).catch((err)=>console.log(err))
       
    }, [])

    const movieClicked = (index)=>{
        const moviePlay = movies.filter((e)=>{
            return e.id == index
        })
        setClicked(moviePlay)
    }

    // useEffect(() => {
    //     {}
    // }, [clicked])

   
    return (
        <>
       
       

            {movies.map((e)=>{
            return(
                   
            movieClicked(e.id)}>
               
               

{e.title}

               
           
           
            ) }
            ) }
       
       
        </>
    ) }

export default Movie