Dynamic loading of data into a modal window React

Question

I have a movie picture on the site, how can I assign an id to it and, using this id, load information about it from a database into its modal window, for example?

This is a window with a card and a modal window that is attached to it.

  return (
    <div>
      <div className={cl.default}>
        <Card
          img={
            "https://img.freepik.com/free-photo/bright-petals-gift-love-in-a-bouquet-generated-by-ai_188544-13370.jpg"
          }
          onClick={() => setModalActive(true)}
        />
      </div>
      <ModalWindow
        active={modalActive}
        setActive={setModalActive}
        title={films[0].title}
        rating={films[0].rating}
        country={films[0].country}
        pegi={films[0].pegi}
        description={films[0].description}
        img={films[0].img}
      />
    </div>
  );
};

export default CardComponent;

This is the final component.

const PosterSection = (props) => {
  return (
    <section className="cards">
      <CardComponent /* There should be an id here. *//>
      <CardComponent />
      <CardComponent />
      <CardComponent />
      <CardComponent />
    </section>
  );
};