我已经开始了一个实习，我必须使用NEXT JS建立一个待办事项列表。但问题出现了，该应用程序也更新了一个空字符串。我必须在这个问题上工作，并有20多个小时来挖掘一个解决方案。我无法解决它。我试图传递一些参数，但它不工作。

import { useState } from "react"
import '../styles/globals.css'

const index=()=> {
    const [userinput,setuserinput]=useState("")
    const [todolist,settodolist]=useState([])

    const handlechange=(e)=>{
        e.preventDefault()
        if(e.target.value!=""){
            setuserinput(e.target.value)
        }
    }

    const handlesubmit=(e)=> {
        settodolist([
            userinput,
            ...todolist
        ])

        e.preventDefault()
    }

const handledelete=(todo)=>{
 const updatedelete=todolist.filter(todoitem => todolist.indexOf(todoitem) != todolist.indexOf(todo))
 settodolist(updatedelete)
}

    return(
        <div className="FLEX">
            <h3 className="heading">Welcome to Next JS To Do app</h3>
            <form className="FORM">
               <div className="Wrap">
                    <input type="text" onChange={handlechange} placeholder="Enter a todo item" className="INPUT"></input>
                    <button onClick={handlesubmit} className="Button">Submit</button>
               </div>
            </form>
            <ul>
                {
                    todolist.length>=1?todolist.map((todo,idx)=>{
                        return <li key={idx}>{todo} <button onClick={(e)=>{
                            e.preventDefault()
                            handledelete(todo)
                        }}>Delete</button></li>
                    }):"Enter a Todo List"
                }
            </ul>
        </div>
    )
}

export default index