Tengo este componente que tiene una entrada y cuando ingresa un valor, busca en otro componente:

 export default function Form({ onSearch, countries, setCountries, input, setInput }) { function inputHandler(e) { setInput(e.target.value); onSearch(e.target.value); } return ( <form> <input type="text" value={input} placeholder="Search for a country..." onChange={inputHandler} ></input>)

Mientras escribe, establece un estado de entrada (setInput) y realiza una búsqueda en este componente con una búsqueda y establece otro estado (setSearch):

 function App() { const [input, setInput] = useState(""); const [countries, setCountries] = useState([]); const [search, setSearch] = useState([]); function onSearch(name) { fetch(`https://restcountries.eu/rest/v2/name/${name}`) .then((r) => r.json()) .then((data) => { setSearch(data); }); }

Mientras escribo, veo que el estado cambia y hago la búsqueda. La cuestión es que cuando estoy eliminando, el estado de búsqueda cambia, pero cuando no tengo caracteres en el campo de entrada, el estado de búsqueda mantiene la información. ¿Cómo puedo volver al estado inicial?