I am using ReactJS.
I have a list of products which have infinite scroll on mobile screen.

Once user scroll towards the bottom of the page given below function runs:

     const { search, pathname:pathNameNew } = useLocation();
     const history = useHistory();

     // Runs when user scroll to bottom.
     const bottomCallback = (entries) => {
 
         if(entries.length && entries[0].isIntersecting && totalPages > currentPage) {
 
             // preserve all existing params
             const nextParams = new URLSearchParams(search);
             
             const params = Object.fromEntries(nextParams.entries());
             console.log("nextParamsnextParams", nextParams.getAll("soch_colour[filter]"));
 
             // remove any existing sort value
             nextParams.delete("page");

 
             // append the new value
             nextParams.append( `page`, `${currentPage+1}` );
             
             // prepend `?` to the final string
             const newSearch = `?${nextParams.toString()}`; //?page=1
             
             const sumPath = pathNameNew + newSearch; //product.html + ?page=1

             history.push(`${sumPath}`); // product.html?page=1
         }        
     };

So on scroll bottom URL looks like:

/product.html?page=1
/product.html?page=2 etc etc.    

But the problem is that if user is on page = 4 and presses browser back button then it is not going back to the previous page 3. It leaves the product.html page,

What’s problem here.