'forcePage' and 'page' not updating

[xJuan21]

Hello.

I'm trying to reset the active/selected page to the first one after selecting a different category called the "Tab" Component. Everything else is working well, Items are being displayed correctly, but for some reason, 'page' or 'force page' will not use or respect any input I give it after pressing a different Tab. I don't know exactly what I could be doing wrong.

My "Pagination" Component, which uses react-paginate:

import React, { useState, useEffect } from "react";
import Items from './Items';
import ReactPaginate from "react-paginate";
import "./Pagination.css";

function Pagination({ItemsList, ItemsPerPage}) {

   // Here we use item offsets; we could also use page offsets
  // following the API or data you're working with.
  const [itemOffset, setItemOffset] = useState(0);
  const items = ItemsList.map((value)=>{
       return value;
  });

  // Simulate fetching items from another resources.
  // (This could be items from props; or items loaded in a local state
  // from an API endpoint with useEffect and useState)
  const endOffset = itemOffset + ItemsPerPage;
  console.log(`Loading items from ${itemOffset} to ${endOffset}`);
  const currentItems = items.slice(itemOffset, endOffset);
  console.log(currentItems);
  const pageCount = Math.ceil(items.length / ItemsPerPage);

  // Invoke when user click to request another page.
  const handlePageClick = (event) => {
    const newOffset = (event.selected * ItemsPerPage) % items.length;
    console.log(
      `User requested page number ${event.selected}, which is offset ${newOffset}`
    );
    setItemOffset(newOffset);
  };
  return (
      <>
        <Items data={currentItems}/>
        <ReactPaginate
          className="pagination"
          breakLabel="..."
          nextLabel=" >"
          // initialPage={2}
          // activePage={forcePage}
          //forcePage={0}
          page={0}
          onPageChange={handlePageClick}
          pageRangeDisplayed={5}
          pageCount={pageCount}
          pageClassName = 'PageElement'
          previousLabel="< "
          renderOnZeroPageCount={null}
        />
      </>
    );
};

export default Pagination;

My 'Projects' Component, which calls the 'Pagination' Component:

    return(
        <>
            <section className='ProjectSection'>
                <div className='ProjectContainer'>
                    <h2>Projects</h2>
                    
                    <div className="ProjectMenu">
                        <Tabs filterCategory={filterCategory} tabsData={tabsData}/>
                    </div>
                    
                    <div className="Project_pagination">
                        {/* <Items data={data} /> */}
                        <Pagination ItemsList={data} ItemsPerPage={3}/>
                    </div>                    
                </div>
        </section>
    </>
    )

[goldmont]

Hi,

try to set the prop disableInitialCallback to false.

[xJuan21]

I'm still dealing with the same issue.
You can try it here: https://juan-mota.com In the "Projects" Section.

code: