How do I pass an image from array to react material ui modal with map funciton?

Question

I've few images around 15 which I rendering to my main component. It's working fine but I'm unable to pass a single image to my modal. When I click on any card all those 15 images are overlapping in the modal wherever I want the only clicked image to be passed in the modal. How do I achieve it?

In short: Only clicked image should be rendered on modal but when I click on any card it's rendering all the images in modal at once

Here is my live code link available for codesandbox

Below is my raw code

App.js

import { Grid } from "@material-ui/core";
import MyCard from "./components/MyCard";
import React from "react";
import ImagePopup from "./components/ImagePopup";
import HairSamples from "./assets/Images";

export default function App() {
  const [openModal, setOpenModal] = React.useState(false);
  // state should load all my images
  const [img, setImg] = React.useState(HairSamples);

  const handleOpen = () => {
    setOpenModal(true);
  };

  const handleClose = () => {
    setOpenModal(false);
  };
  return (
    <div>
      <Grid container spacing={2}>
        {img.map((item, i) => (
          <Grid item xs={12} sm={2} key={i}>
            <MyCard img={item} handleOpen={handleOpen} />
            {/* it should only render clicked image but it's rendering all my images at once */}
            <ImagePopup
              img={item}
              openModal={openModal}
              setOpenModal={setOpenModal}
              handleOpen={handleOpen}
              handleClose={handleClose}
            />
          </Grid>
        ))}
      </Grid>
    </div>
  );
}