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"
  }, 

this is the my code. i have tried to use **useHistory** hook to redirect to the searchpage when i have clicked that search button.
but after adding Use History hook it displays message like

Invalid hook call. Hooks can only be called inside of the body of a function component.

is it wrong that the way i have called **useHistory** hook???

Github repo