При изменение поле completed, попадаю два раза в блок 'if' и при выходе не получаю изменение,как можно исправить?

При выполнение данной фунции 
const toggleHandler = (id: number) => {
    setTodos((prev) =>
      prev.map((todo) => {
        if (todo.id === id) {
          todo.completed = !todo.completed;
        }
        return todo;
      })
    );
  };
попадаю в блок if два раза хот значение id не повторяются 

export const TodosPage: React.FC = () => {
  const [todos, setTodos] = useState<ITodo[]>([]);
  useEffect(() => {
    const saved = JSON.parse(localStorage.getItem("todos") || "[]") as ITodo[];
    setTodos(saved);
  }, []);
  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }, [todos]);
  const addHandler = (title: string) => {
    const newTodo: ITodo = {
      title: title,
      id: Math.random(),
      completed: false,
    };

    setTodos((prev) => [newTodo, ...prev]);
  };
  const toggleHandler = (id: number) => {
    setTodos((prev) =>
      prev.map((todo) => {
        if (todo.id === id) {
          todo.completed = !todo.completed;
        }
        return todo;
      })
    );
  };
  const removeHandler = (id: number) => {
    setTodos((prev) => prev.filter((todo) => todo.id !== id));
  };
  return (
    <>
      <TodoForm addHandler={addHandler} />
      <ToDoList
        todos={todos}
        onTogggle={toggleHandler}
        onRemove={removeHandler}
      />
    </>
  );
};