Intenté establecer el estado en una cadena vacía pero no funciona, el valor ingresado se restablece pero aún muestra el valor ingresado dentro del campo de entrada. ¿Cómo puedo arreglar esto?

 import { useState } from 'react'; const App = () => { const [task,setTask] = useState(''); const [list,setList] = useState([]); const submitHandler = (event) => { event.preventDefault(); const newTask = { id: new Date().getTime().toString(), title: task }; setList([...list, newTask]); setTask(''); } const clearList = () => { setList([]); } const removeItem = (id) => { const filteredList = list.filter(item => item.id !== id); setList(filteredList); } return <div> <h2>To do list!</h2> <form onSubmit={submitHandler}> Enter Task! <input type='text' placeholder='Wut you upto?' onChange = {(event) => {setTask(event.target.value)}}> </input> </form> <div> {list.map((obj) => ( <h4 key={obj.id}>{obj.title}<button onClick={() => removeItem(obj.id)}>X</button></h4>))} <button onClick={clearList}>Clear All</button> </div> </div> } export default App