editing the input value in todo list adds a new task

Question

the edit list button works, the problem is that when you edit the input and press enter a new task is added. how can I render the task

let todos1 = JSON.parse(localStorage.getItem("todos")) || [];
    const inputBox = document.querySelector("#todo");
    const addBtn = document.querySelector("#todo-form #submit");
    const deleteAllBtn = document.querySelector("#footer button");
    const todo = document.getElementById("todo");

    inputBox.addEventListener("keyup", () => {
      let userEnteredValue = inputBox.value;
      if (userEnteredValue.trim() && userEnteredValue.length > 3) {
       addBtn.classList.add("active"); //active the add button
     } else {
       addBtn.classList.remove("active"); //unactive the add button
     }
     });

    const render = () => {

     const todoList = document.getElementById("todo-list");
     let todosTemplate = [...new Set(todos1)].map((t, id) => {
       return `<li onclick='editTask(${id}, "${t}")'>${t}<span class="icon1"><i class="fas fa-trash"></i></span><span class="icon2"><i class="fas fa-edit"> </i></span></li>`;
     });
     todoList.innerHTML =
       todosTemplate.join("") || `<span>You don't have any task here</span>`;

     const elementos = [...document.querySelectorAll(".icon1")];
     elementos.forEach((elemento, i) => {
        elemento.addEventListener("click", () => {
          todos1.splice(i, 1);
          updateTodos();
          render();
        });
      });

      let checkTask = document.querySelectorAll("li");
      const deleteAllLi = document.querySelector("#clear");
      if (checkTask.length > 1) {
        deleteAllLi.classList.add("active"); 
     }  else {
        deleteAllLi.classList.remove("active");
      }
    };

       const updateTodos = () => {
       localStorage.setItem("todos", JSON.stringify(todos1)); 
        };

      deleteAllBtn.addEventListener("click", () => {
        todos1 = []; 
        updateTodos();
        render(); 
     });

     function editTask(id, name) {
       editId = id;
       inputBox.value = name;
       updateTodos();
       render();
     }

         window.onload = () => {
           render();
           const form = document.getElementById("todo-form");
           form.addEventListener("submit", (event) => {
           event.preventDefault();
           const todo = document.getElementById("todo");
           const todoText = todo.value.replace(/[^a-zA-Z ]/g, "");
           todos1.push(todoText);
           updateTodos(todos1);
           render();
           todo.value = "";
           addBtn.classList.remove(".active");
       });
     };

I'd like to solve this as I don't understand why a new task is added instead it should be edited. The other issue is that when deleting a task the input shows the text of the task I deleted before. I don't know if to use the method findIndex() or find()

I don't know how to find the li id and solve this. I'm begginer