Ввод React сохраняет ввод при первом щелчке, а затем показывает его в пользовательском интерфейсе при втором щелчке... ПОЧЕМУ?!!! и как это исправить

Я делаю приложение списка задач с реакцией, и я столкнулся с такой ошибкой, когда вы вводите ввод, затем нажимаете кнопку, чтобы создать новый объект todoItem, он показывает пустой объект, а затем сохраняет этот ввод в объектной переменной todoList внутри производства код, то этот первый элемент todo появляется в пользовательском интерфейсе при 2-м щелчке, а при 3-м щелчке появляется 2-й элемент todoItem, 4-й щелчок по 3-му элементу и так далее... я не знаю, почему это происходит, и я хочу решить это, здесь это мой код, ребята:

----------APP COMPONENT-------
import React, { useState } from "react";
import Form from "./Form";
import List from "./List";

function App() {
  const [input, setInput] = useState("");
  const [todoItem, setTodoItem] = useState({});
  const [todoList, setTodoList] = useState([]);

  const addTodoItem = (e) => {
    e.preventDefault();
    input && setTodoItem({ content: input, id: Math.random() * 1000 });
    setTodoList([...todoList, todoItem]);
    setInput("");
  };

  return (
    <div>
      <Form input = {input} addTodoItem = {addTodoItem} setInput = {setInput} />
      <List todoList = {todoList} setTodoList = {setTodoList} />
    </div>
  );
}

export default App;

---------FORM COMPONENT-----------
import React from "react";

function Form({ input, setInput, addTodoItem }) {
  return (
    <div>
      <form action = "">
        <label>todos</label>
        <input
          value = {input}
          onChange = {(e) => setInput(e.target.value)}
          placeholder = "what needs to be done"
          type = "text"
        />
        <button onClick = {addTodoItem}>set todo</button>
      </form>
    </div>
  );
}
export default Form;


----------LIST COMPONENT-----------
import React, { useState } from "react";

function List({ setTodoList, todoList }) {
  const [completed, setCompleted] = useState(false);

  const deleteItem = (del) => {
    todoList?.map((item, i, arr) => {
      setTodoList(arr.filter((value) => value.id != del));
      console.info("item>>>", item, "index>>>>", i, "array>>>>", arr);
    });
  };
  const reverseCompleted = () =>
    completed ? setCompleted(false) : setCompleted(true);
  return (
    <div>
      <div>
        {todoList.map((item, i) => (
          <div key = {i}>
            <p>{item.content}</p>
            <button onClick = {() => deleteItem(item.id)}>Delete</button>
            <button onClick = {reverseCompleted}>
              {completed ? "unCompleted" : "Completed"}
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

export default List;