I am using React for a website for an open garden scheme that I organise. I have a component in which you can look at a specific garden (garden.js) and its associated images. I present these images as smaller versions of the original.

I am making a modal (ImageModal.js) that starts when you click an image and shows normal size of that image. I got the modal running, but I don't understand how to get the right image data into that modal.

This is my (gutted) code so far:

----------------------
Garden.js
----------------------
export default function Garden() {

  const [openImageModal, setOpenImageModal] = useState(false);
  
  //Removed: fetch the garden and image objects from the database, imports, css styling, etc

  return (
    <div>
      <div>
        <h1>{garden.title}</h1>
        <div>
        {
          images.map((image) => (
            <img
              src={image.image}   //base64 encoded blob
              key={image.id}      //id of the image in the db
              alt={garden.title}
              onClick={() => { setOpenImageModal(true); }}
            ></img>
          ))
        }
      </div>
      {openImageModal && <ImageModal closeImageModal={setOpenImageModal} />}
    </div>
  );
}

----------------------
ImageModal.js
----------------------
export default function ImageModal({ closeImageModal }) {
  return (
    <div>
        <button onClick={() => closeImageModal(false)}>x</button>
    </div>
    <div>
        <img src={theProperImage}></img>
    </div>
  );
}

So my question is this: how do I get {image.image} from one of the images created by images.map into the modal so I can use it as (or in place of) {theProperImage}?

Hope I didn't forget anything to mention and thanks in advance!