Infinite scroll pagination with browser back button

Question

I have infinite scroll feature to load more data.
So when user scroll towards the bottom of the page, below code updates the URL like:

• /in/top-wear.html?page=2
• /in/top-wear.html?page=3
  . . . and so on.

But the problem is that if user presses the browser back button then it leaves
the page /top-wear.html instead of going back to previous page like ?page=3 ?page=2 ?page=1 etc.

    useEffect(() => {
        console.log("🐇 top", categoryLoading);
        const handleScroll = () => {
            if(categoryLoading) return;
            const sumOfInnerHeightAndScrollY = (window.innerHeight + window.scrollY);
            const offsetHeight = document.body.offsetHeight;
            const scrollBottomPercentage = ((offsetHeight-sumOfInnerHeightAndScrollY)/offsetHeight)*100;

            if (scrollBottomPercentage < 25) {
                const searchParams = new URLSearchParams(window.location.search);
                const currentPage = parseInt(searchParams.get('page') || 1);
                const nextPage = currentPage + 1;

                console.log("🐇 scroll bottom", paginationButton);

                searchParams.set('page', nextPage);

               
                
                history.push({ search: searchParams.toString() }); //"page=2 and so on..."
            }
        };

        window.addEventListener('scroll', handleScroll);

        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, [history, categoryLoading]);    
    

I am NOT able to find what's the problem. Please help here.
Note:
I just want that if user is currently in page=4 and now user pressed the browser back button, then it should go to page=3 and so on...