我是React和js的新手，我正在参加一个关于React的速成班，在课程的某个时候被这个错误卡住了。这是我收到的preventDefault方法的错误消息，我使用该方法来防止页面刷新。
这是2个文件

import { useState } from "react"

export function NewTodoForm({onSubmit}){
    const [newItem, setNewItem] = useState("")
  function handleSubmit(e) {

    e.preventDefualt()
    if (newItem === "") return
    onSubmit(newItem)
    
    setNewItem("")
  }
return (
    <form className="new-item-form" onSubmit={handleSubmit}>
        <div className="form-row">
          <label htmlFor="item"> New Item</label>
          <input value={newItem} onChange={e => setNewItem(e.target.value)} type="text" id="item"></input>
        </div>
        <button className="btn" >
          Add
        </button>
      </form>
)
}

import "./styles.css"
import { useState } from "react"
import { NewTodoForm } from "./NewTodoForm"

function App() {

  const [todos, setTodos] = useState([])
  

  function addTodo(title) {
    setTodos(currentTodos => {
      return [
        ...currentTodos,
        { id: crypto.randomUUID(), title, completed: false },
      ]
    })
  }
  console.log(todos)
  return (
    
    <>
      <NewTodoForm onSubmit={addTodo}/>
    
      <h1 className="header">
        Todo List
      </h1>
     
      
      <ul  className="list">
      {todos.map(todo => {
        // eslint-disable-next-line react/jsx-key
        return (
          <> 
          <li key={todo.id}>
          <label>
            <input type="checkbox"  checked={todo.completed}/>
            {todo.title}

          </label>
          <button className="btn btn-danger">
            delete
          </button>

        </li>
        </>
        )
        
      })}
      
      </ul>
    </>


  )
}

export default App

我尝试使用其他方法而不是preventDefualt，但它们都不起作用，防止刷新页面。