Javascript – Why are my Li's items not being checked? REACT

The ‘checked’ value on my list is not changing, i don’t know why that is

I’m making a toDo app

My State Values:

 const [newItem, setNewItem] = useState("");
 const [toDos, setToDos] = useState([]);

My function

  function toggleToDo(id, completed) {
    setToDos((currentTodo) => {
      return currentTodo.map((todo) => {
        if (todo.id === id) {
          return { ...todo, completed};
        }
        return todo;
      });
    });
  }

My List

<ul className="list">
        {toDos.map((toDo) => {
          const { id, title, completed } = toDo;
          return (
            <li key={id}>
              <label htmlFor="">
                <input
                  type="checkbox"
                  checked={completed}
                  onChange={(e) => toggleToDo(id, e.target.checked)}
                />
                {title}
              </label>
              <button className="btn btn-danger">Delete</button>
            </li>
          );
        })}
      </ul>

i am expecting the ‘e.target.checked’ to change when the function toggleToDo is called