Как отобразить данные массива, по которому щелкнули мышью, в React Modal?

Question

Я нанес на карту некоторые данные из того же файла, который отображает заголовок, изображение и некоторую информацию. Это хорошо. Теперь я хочу реализовать модальное окно реакции, в котором каждый раз, когда я нажимаю на изображение, я должен получать ту же информацию для изображения. Я знаю, что должен привязать это к обработчику событий, но не знаю, как это сделать. Пожалуйста, помогите: P Вот код ниже

это файл JSON. Он находится в том же файле, непосредственно перед отрисованным кодом.

const projects = [
  {
    id: 1,
    title: "Weather Web Application",
    type: "Web Application",
    timeFrame: "3 Hours",
    tools: ["ReactJs, JQuery, CSS3"],
    Img:
      "https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=393&q=80",
  },
  {
    id: 2,
    title: "Chat Application",
    type: "Web Application",
    timeFrame: "3 Days",
    tools: ["ReactJs, NodeJS, SocketIO, CSS3, API"],
    Img:
      "https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=393&q=80",
  },
  {
    id: 3,
    title: "Recipe Book",
    type: "Web Application",
    timeFrame: "3 Hours",
    tools: ["ReactJS, API, CSS3"],
    Img:
      "https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=393&q=80",
  },
  {
    id: 4,
    title: "Recipe Book",
    type: "Web Application",
    timeFrame: "3 Hours",
    tools: ["ReactJS, API, CSS3"],
    Img:
      "https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=393&q=80",
  },
];

Вот код, только из изображений.

<div className="projects-container">
            {projects.map((project) => (
              <div className="project-box" key={project.id}>
                <div data-aos="flip-down" className="project-img">
                  <img
                    src={project.Img}
                    alt={project.title}
                    onClick={() => setModalIsOpen(true)}
                  />
                  <Modal
                    isVisible
                    isOpen={modalIsOpen}
                    onRequestClose={() => setModalIsOpen(false)}
                    style={{
                      overlay: {
                        position: "fixed",
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0,
                        backgroundColor: "rebeccapurple",
                        zIndex: 1000,
                      },
                      content: {
                        position: "absolute",
                        top: "10px",
                        left: "20%",
                        right: "20%",
                        bottom: "10px",
                        backgroundColor: "papayawhip",
                      },
                    }}
                  >
                    <div>
                      <h2
                        className="modal-title"
                        style={{
                          backgroundColor: "blue",
                        }}
                      >
                        
                      </h2>
                    </div>
                    {/* <img src={project.Img} alt={project.title} /> */}
                    <div>
                      <button onClick={() => setModalIsOpen(false)}>
                        close
                      </button>
                    </div>
                  </Modal>
                  <div data-aos="fade-right" className="project-title">
                    {project.title}
                  </div>
                </div>

                <div data-aos="fade-left" className="project-type">
                  {project.type}
                </div>
                <div data-aos="fade-right" className="project-time">
                  {project.timeFrame}
                </div>
                <div data-aos="fade-left" className="project-tool">
                  {project.tools}
                </div>
              </div>
            ))}
          </div>
        </div>