Back functionality of browser is not working - reactjs

Question

I have written the following code with a Query string corresponding to the filters applied. On clicking browser's back button I want to get back to the previous set of filters, but instead I land back to the browser's home page every time.
import React, {useState, useEffect, useCallback} from 'react'
import {DropDownList, MultiSelect} from "#progress/kendo-react-dropdowns"
import {Button} from '#progress/kendo-react-buttons'
import { useHistory, useLocation } from "react-router-dom"
const Filter = () => {
const history=useHistory()
const location=useLocation()
const [Standard,setStandard] = useState("All")
const [Hobbies,setHobbies] = useState(["Playing"])
const [Responsibility,setResponsibility] = useState("All")
const [QueryString,setQueryString] = useState(location.search.substring(1))
const options={
StandardList:["All","VI","VII","VIII"],
HobbiesList: ["Playing", "Drawing","Swimming"],
ResponsibilityList:["All","Monitor","Head","Sports Captain"]
}
const handleApply = ()=>{
setQueryString(`Standard=${JSON.stringify(Standard)}&Responsibility=${JSON.stringify(Responsibility)}&IncidentStatus=${JSON.stringify(Hobbies)}`)
}
const backButtonEvent = useCallback((e) => {
e.preventDefault();
history.goBack()
},[])
useEffect(() => {
window.addEventListener('popstate',backButtonEvent);
return ()=>{
window.removeEventListener('popstate',backButtonEvent);
}
},[backButtonEvent])
useEffect(() => {
var params= new URLSearchParams((QueryString)?(QueryString):`Standard=${JSON.stringify(Standard)}&Responsibility=${JSON.stringify(Responsibility)}&IncidentStatus=${JSON.stringify(Hobbies)}`)
history.push({search: params.toString()})
}, [QueryString])
return (
<div>
<label>Standard </label>
<DropDownList data={options.StandardList} defaultValue={"All"} value={Standard}
onChange={(event)=>setStandard(event.target.value)}/>
<label > Hobbies </label>
<MultiSelect data={options.HobbiesList} defaultValue={["Playing"]} value={Hobbies} onChange={(event)=>setHobbies([...event.value])}/>
<label > Responsibility </label>
<DropDownList data= {options.ResponsibilityList} defaultValue= {"All"} value={Responsibility} onChange={(event)=>setResponsibility(event.target.value)} />
<Button id="submitFilter" type="button" onClick={handleApply} > Apply </Button>
</div>
)
}
export default Filter
Why am I getting this behaviour and how can I resolve it?