import { useState } from 'react'; import "./Searchbar.css" import SearchIcon from '@material-ui/icons/Search'; import MicIcon from '@material-ui/icons/Mic'; import { Button } from '@material-ui/core'; import { useHistory } from "react-router-dom"; function Searchbar() { const history = useHistory(); const[input, setInput] = useState(''); const search = (e) =>{ e.preventDefault(); // when the click enter button history.push("/search") } return ( <form className="search"> <div className="search_box"> <SearchIcon className="search_icon" /> <input value={input} onChange={e => setInput(e.target.value)}></input> <MicIcon /> </div> <div className="search_cards"> <Button type='submit' onClick={search} variant="outlined">Google Search</Button> <Button variant="outlined">I'm Feeling Lucky</Button> </div> </form> ) } export default Searchbar;

 "dependencies": { "@material-ui/core": "^4.12.3", "@material-ui/icons": "^4.11.2", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^5.3.0", "react-scripts": "4.0.3", "web-vitals": "^1.1.2" },

este es mi código. Intenté usar el gancho **useHistory** para redirigir a la página de búsqueda cuando hice clic en ese botón de búsqueda.
pero después de agregar el gancho Use History, muestra un mensaje como

Llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función.

¿Está mal que la forma en que he llamado gancho **useHistory**???

repositorio de Github