I have a to-do app with react-firebase . My updatedoc function works but only in the last element how can i make it work on the element i want?

It's okay outside of the modal but inside of the modal it just doesnt work. Anyone know how to fix this issue?

const updated = async (task)=>{
    await updateDoc(doc(db,"tasks",task.id),{
      title:input,
    }); 
    setInput("");
    setIsOpen(false);
  }

return (
    <div className="App">
      <div className="box">
      <AddTask/>
      <div className="task-container">
        {tasks.map((task)=>(
        <div key={task.id}  className="entry">
            <p className="title">{task.title}</p>
          <DeleteIcon className="delete" onClick={()=>handleDelete(task.id)}/>
          <EditIcon className="edit" onClick={openModal} />
          <Modal className="modal"
        isOpen={modalIsOpen}
        onAfterOpen={afterOpenModal}
        onRequestClose={closeModal}
        contentLabel="Example Modal"
        ariaHideApp={false}
      >
        <h2 >edit to-do</h2>
        
          <input value={input} onChange={(e)=>setInput(e.target.value)} placeholder="enter new to-do" />
            <EditIcon className="edit" onClick={()=> updated(task)} />
            <CloseIcon className="delete" onClick={closeModal}/>
      </Modal>
              </div> 
))} 
      </div>
      </div>
    </div>
  );
}```