React Paginate Active class not working when i use filter or search list using react and next js

Question

import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
import { Filter } from "../common/filters/Filter";
import CardList from "./CardList";
import ReactPaginate from "react-paginate";
import courseApiService from "@/services/courseServices";

export const CourseList = forwardRef(
  ({ courseList, trainingList, vendorList }, ref) => {
    CourseList.displayName = "CourseList"; // Add display name
    const [listCourse, setListCourse] = useState(courseList);
    const [pageCount, setPageCount] = useState(0);
    const [selectedTrainings, setSelectedTrainings] = useState([]);
    const [selectedVendors, setSelectedVendors] = useState([]);
    const [query, setQuery] = useState("");
    const [currentPage, setCurrentPage] = useState(1); // current active page

    useImperativeHandle(ref, () => ({
      courseListApi,
    }));

    const limit = 2;
    const vendorQueryString = selectedVendors
      .map((id) => `vendors[]=${id}`)
      .join("&");
    const trainingQueryString = selectedTrainings
      .map((id) => `trainings[]=${id}`)
      .join("&");

    console.log(vendorQueryString);
    console.log(trainingQueryString);


    useEffect(() => {

      courseListApi(1, "", vendorQueryString, trainingQueryString);
    }, [selectedTrainings, selectedVendors]);

    function handleTrainingsSelection(selectedItems) {
      setSelectedTrainings(selectedItems);
    }

    function handleVendorsSelection(selectedItems) {
      setSelectedVendors(selectedItems);
    }
    const courseListApi = async (
      currentPage,
      query,
      vendorQueryString = "",
      trainingQueryString = ""
    ) => {
      setQuery(query);
      try {
        const fetchedCourses = await courseApiService.getCourses(
          currentPage,
          limit,
          query,
          trainingQueryString,
          vendorQueryString
        );
        setListCourse(fetchedCourses);

        const total = fetchedCourses?.count;

        setPageCount(+Math.ceil(total / limit));

        setCurrentPage(currentPage);
        console.log(listCourse);
      } catch (error) {
        console.log(error);
      }
    };
    console.log(currentPage);
    const nextPageClick = async (data) => {
      console.log(data.selected);
      let currentPage = data.selected + 1;

      setCurrentPage(currentPage);

      await courseListApi(
        currentPage,
        query,
        vendorQueryString,
        trainingQueryString
      );
    };

    return (
      <div>
        <div className="flex gap-[2.4rem] xl:px-[6.4rem] small:px-[3.4rem] mt-[4.8rem] ">
          <div className="hidden lg:block">
            <Filter
              vendor={vendorList}
              training={trainingList}
              handlePageClick={courseListApi}
              onTrainingsSelection={handleTrainingsSelection}
              onVendorsSelection={handleVendorsSelection}
              selectedVendors={selectedVendors}
              selectedTrainings={selectedTrainings}
            />
          </div>

          <div className="flex flex-col justify-between">
            <div>
              <CardList
                vendor={vendorList}
                training={trainingList}
                handlePageClick={courseListApi}
                onTrainingsSelection={handleTrainingsSelection}
                onVendorsSelection={handleVendorsSelection}
                name={listCourse}
              />
            </div>
            <div className="mt-[2rem] mb-[2rem]">
              <ReactPaginate
                breakLabel="..."
                nextLabel=" > "
                onPageChange={nextPageClick}
                pageCount={pageCount}
                previousLabel="< "
                previousClassName="bg-bg_grey  rounded-full p-[1rem] text-gray_800"
                nextClassName="bg-bg_grey  rounded-full p-[1rem] text-gray_800"
                containerClassName="flex text-center gap-[1.2rem] w-[100%]  text-s16  items-center leading-[1rem] font-semibold"
                pageClassName="w-[3.2rem] h-[3.2rem] p-[1rem] text-center flex "
                pageLinkClassName="text-s18  "
                renderOnZeroPageCount={null}
                activeClassName="bg-hero_bg hover:bg-hero_bg cursor:pointer text-main rounded-full"
            
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
);

when i filter the list it updates the list but active class doesnot get updated e.g i get list with 3 pages when i paginate to 3rd page it works well and active class also updates which shows on which page u are and then i use filter it fetches data correctly and also no. of pages bur active class will remain on page 3 and will not be displayed i use force page and initial page also but it doesnot work `