I have a crud app in react js. I use firebase as back-end. I have my updatedoc function that works when you hit a button. But it only works once. How can i edit multiple times? Delete one is fine.

I want to edit my inputs multiple times. Even after i refresh the page.

Im using firebase in the back-end.So anyone can help me with this?

function App() {
  const [tasks,setTasks]=useState([]);
  let subtitle;
  const [modalIsOpen, setIsOpen] = React.useState(false);
  const [input,setInput]=useState("");

  function openModal() {
    setIsOpen(true);
  }

  function afterOpenModal() {
    // references are now sync'd and can be accessed.
    subtitle.style.color = '#f00';
  }

  function closeModal(e) {
    e.preventDefault();
    setIsOpen(false);
  }

  const modal=useRef();

  useEffect(()=>{
      const q=query(collection(db,"tasks"));
      const unsub=onSnapshot(q,(querySnapshot ) =>{
        let taskArray=[];
        querySnapshot.forEach(doc=>{
          taskArray.push({...doc.data(),id:doc.id})
        })
        setTasks(taskArray);

      });
      return ()=>unsub();
  },[]);

  const toggleComplete = async (task) => {
    await updateDoc(doc(db,'tasks',task.id),
    {
      title:input
    });
  };
  
  const handleDelete = async (id) => {
    await deleteDoc(doc(db, "tasks", id));
  };  
  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>
           
            <div className="modal">
            <button onClick={openModal}>Edit</button>
      <Modal
        isOpen={modalIsOpen}  
        onAfterOpen={afterOpenModal}
        onRequestClose={closeModal}
        ariaHideApp={false}
        style={customStyles}
        contentLabel="Example Modal"
      >
        <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2>
        <div>I am a modal</div>
        <form>
          <input value={input} onChange={event => setInput(event.target.value)}/>
          <button onClick={()=>toggleComplete(task)}>Edit</button>
        </form>
      </Modal>
            </div>
          <button onClick={()=>handleDelete(task.id)}>Delete</button>
          </div>
          
))}
       
      </div>
      </div>
    </div>
  );
}