我只需要打開我單擊的模態 div。但是當我單擊任何元素時它們都會打開。如何使其僅進入我點擊的模式？應用程序.jsimport { useEffect, useState } from "react";import Modal from "./components/Modal";import "./style.css";function App() {  useEffect(() => {    fetch(      "https://api.unsplash.com/photos/?client_id=cf49c08b444ff4cb9e4d126b7e9f7513ba1ee58de7906e4360afc1a33d1bf4c0"    )      .then((res) => res.json())      .then((result) => setItem(result));  }, []);  const [item, setItem] = useState([]);  const [modalActive, setModalActive] = useState(false);  return (    <div className="app">      {item.map((item) => (        <div          className="image-container"          key={item.id}          onClick={() => setModalActive(true)}        >          <img className="image" src={item.urls.regular} alt="logo" />          <div className="info">            <img              className="avatar"              src={item.user.profile_image.small}              alt="avatar"            />            <div className="text">              <p className="name">{item.user.username}</p>              <p className="name">{item.alt_description}</p>            </div>          </div>          <Modal            active={modalActive}            setActive={setModalActive}            url={item.urls.regular}          />        </div>      ))}    </div>  );}export default App;模態.jsximport React from "react";import "./index.css";const Modal = ({ setActive, active, url }) => {  return (    <div      className={active ? "modal active" : "modal"}      onClick={() => setActive(false)}    >      <div className="modal__img">        <img src={url}/>      </div>    </div>  );};export default Modal;