modal for all items shown in one click ( Reactjs )

I have a todo-list app and I want to show more details of a task when its clicked so I’m using the react-modal package and when I click on one item, all of the items modal will pop up and not the single one I clicked on

import { useContext, useState } from "react";

import Task from "../task/task";
import { todosContext } from "../../context/todosContext";
import { motion, AnimatePresence } from "framer-motion";
import Modal from "react-modal";

const Search = (props) => {
  const [query, setQuery] = useState("");
  const { todos, setTodos } = useContext(todosContext);
  const [modalIsOpen, setIsOpen] = useState(false);
  const [openedId, setOpenedId] = useState("");

  const PER_PAGE = 4;
  Modal.setAppElement(document.getElementById("root"));

  function openModal() {
    setIsOpen(true);
  }
  function closeModal() {
    setIsOpen(false);
  }


  return (
    <StyledDiv>
     
      <AnimatePresence>
        {currentPageData.map((todo) => (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{
              opacity: 0,
              position: "absolute",
              y: -1000,
              transition: "1s",
            }}
            key={todo.id}
          >
            <Task
              onRequestOpen={openModal}
              key={todo.id}
              title={todo.title}
              description={todo.description}
              backgroundColor="#ffffff"
              disabled={loading}
              onClick={() => deleteHandler(todo.id)}
              placeholder={"completed"}
              onChange={(e) => processChange(e, todo.id)}
              checked={todo.completed}
              id={todo.id}
              htmlFor={todo.id}
              marginTop="-5px"
            ></Task>

            <Modal
              isOpen={modalIsOpen}
              onRequestClose={closeModal}
              style={customStyles}
              contentLabel="Example Modal"
            >
              <button onClick={closeModal}>close</button>
              {todo.description}
            </Modal>
          </motion.div>
        ))}
      </AnimatePresence>
  
    </StyledDiv>
  );
};

export default Search;

the solution I have myself is to make a state called opendItemId and pass the id of the item to it when the user clicks on the item
it works and shows the single and specific detail of the item I clicked on but I can’t close the modal because isOpen which is a property of </Modal component as you can see will be setting the todo.id to opnedItemId state like this isOpen={modalIsOpen(openedId === todo.id)}

>Solution :

First of all, you are creating N modals, with N being the number of the todo items.

So Modal should be outside of your map function. Then you can set the currently selected todo item in your state and load it in your modal.

const [currentTodo, setCurrentTodo] = useState(null);

  const openModal = todoItem => {
    setCurrentTodo(todoItem);
    setIsOpen(true);
  }

.
.
.

        <Task
          onRequestOpen={() => openModal(todo)}
          key={todo.id}

.
.
.

        <Modal
          isOpen={modalIsOpen}
          onRequestClose={closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >
          <button onClick={closeModal}>close</button>
          {currentToDo.description}
        </Modal>