Passing data between child components in React

My goal is to use an onClick function in one of my components, and pass that data to another component (end goal is that in the other component called Playlist, it updates an array with the id of the clicked item).

I am just not sure how to pass the information between child components

My main component (app.jsx) looks like this

  const mainCards = Data.map(card => {
    return(
      <MainCard 
          key={card.id}
          id={card.id}
          image={card.url}
          title={card.title}
          playbutton={card.playbutton}
          addbutton={card.addbutton}
      />
    )
  })
  const sideCards = SideData.map(card => {
    return(
      <SideCard 
        image={card.sideurl}
        key={card.id}
        title={card.sidetitle}
        playbutton={card.playbutton}
        addbutton={card.addbutton}
      />
    )
  })
  return (
    <div className="App">
      <Navbar />
      <Header />
      <Playlist />
      <CardContainer />
      <div className="maincards">
          {mainCards}
      </div> 
      <div className="sidecards">
        {sideCards}
      </div>
    </div>
  )
}

export default App

The component where I am using onClick (MainCard.jsx)

    const handleAdd = (id) => {
        console.log(id)
    }
    return(
        <div className="mainCardObject">
            <div className="cardObj">
                <img src={props.image} className ="mainCardImage"/>
                <img src={props.playbutton} className="playbutton"/>
                <img src={props.addbutton} onClick={() => handleAdd(props.id)} className="addbutton" />
            </div>
        </div>
    )
}

export default MainCard

and the component I wish to pass information to (nothing inside, as I dont know where to start)

    return(
        <div className="playlistContainer">
            <ul>
                <li></li>
            </ul>
        </div>
    )   
}
export default Playlist```