我正在尝试做一个基本的待办事项应用程序，当我尝试一个新的tody页面正在重新加载。我在react中添加了处理函数，但当我单击“添加待办事项”按钮时，页面仍然在重新加载。

import { useState } from "react";
import classes from "./TodoForm.module.css";
const TodoForm = (props) => {
  const [enteredTitle, setEnteredTitle] = useState("");
  const [enteredDescription, setEnteredDescription] = useState("");
  const titleChangeHandler = (e) => {
    setEnteredTitle(e.target.value);
    console.log(enteredTitle);
  };
  const desChangeHandler = (e) => {
    setEnteredDescription(e.target.value);
  };
  const addTodoHandler = (event) => {
    event.preventDefaults();
    props.addItem(
      props.todos.push({
        id:Math.random()*100000000,
        title: enteredTitle,
        desc: enteredDescription,
      })
    );
  };
  return (
    <div className={classes["form-container"]}>
      <h2>Add Todo</h2>
      <form onSubmit={addTodoHandler}>
        <input
          onChange={titleChangeHandler}
          type="text"
          name="title"
          id="title"
          placeholder="Title"
          value={enteredTitle}
        />
        <textarea
          onChange={desChangeHandler}
          name="description"
          placeholder="Description"
          id=""
          cols="30"
          rows="10"
          value={enteredDescription}
        ></textarea>
        <button type="submit">Add Todo</button>
      </form>
    </div>
  );
};
export default TodoForm;

我尝试了不同的方法，但不能找出我做错了什么。