page active link working immediately after clicking before redirecting to that page how to solve this

[Sayem-Mahmud]

page active link working immediately after clicking before redirecting to that page how to solve this

here is my component code:
import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { controller } from '../../../../../src/state/StateController';
import BigSourceCodeCard from './BigSourceCodeCard/BigSourceCodeCard';
import ReactPaginate from 'react-paginate';
import { ApkData } from '../../../../../interfaces/models';
import Loader from '../../../../helpers/Loader/Loader';
import { useRouter } from 'next/router';

interface Props {
apk: Array;
}

const LeftLayout: React.FC = ({ apk }) => {
const router=useRouter()
const states = useSelector(() => controller.states);
const [activePage, setActivePage] = useState(1);
// const {page}=router.query

const pageCount = Math.ceil(states.totalApk / states.itemsPerPage);

const handlePageClick = (event: any) => {
const selectedPage = event.selected + 1;
console.log('state',states.currentPage)
setActivePage(states.currentPage);

const url = window.location.href;

if (url.includes('search')) {
  window.location.href = `/page/${selectedPage}/search/${states.searchValue}`;
} else if (url.includes('category') && !url.includes('subcat')) {
  window.location.href = `/page/${selectedPage}/category/${states.categoryValue}`;
} else if (url.includes('subcat') && url.includes('category')) {
  window.location.href = `/page/${selectedPage}/category/${states.categoryValue}/subcat/${states.categorySubValue}`;
} else {
  window.location.href = `/page/${selectedPage}`;
}
};

return (
<>
{apk ? (
<>

{apk.map(item => {
return (
<React.Fragment>

</React.Fragment>
);
})}

<ReactPaginate
breakLabel='...'
breakLinkClassName={'pageNumber'}
pageRangeDisplayed={2}
marginPagesDisplayed={1}
renderOnZeroPageCount={null}
onPageChange={handlePageClick}
pageCount={pageCount}
previousLabel={'Prev'}
nextLabel={'Next'}
containerClassName={'paginationContainer'}
pageLinkClassName={'pageNumber'}
previousLinkClassName={'pageNumber'}
nextLinkClassName={'pageNumber'}
activeLinkClassName={'active'}
disabledLinkClassName={'disable'}
forcePage={activePage-1} // Remove this line
/>

</>
) : (

)}
</>
);
};

export default LeftLayout;