pagination in reactjs not working properly - reactjs

Question

I have a pagination component I am exporting to paginate set of products in another page but it doesn't seem to work well as there are 4 items in the database but the only number visible in the pagination list is just 1 and I can't figure out what's wrong
components/Pagination.jsx
import React from 'react'
const Pagination = ({postsPerPage, totalPosts, paginate}) => {
const pageNumbers = []
for(let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++){
pageNumbers.push(i)
}
return (
<div>
<div className="pagination page navigation">
<ul className="Pagination-list">
{pageNumbers.map(number =>
<li key={number} className="page-item">
<a onClick={() => paginate(number)} href="#" className="page-link">
{number}
</a>
</li>
)}
</ul>
</div>
</div>
)
}
export default Pagination
import React, { useEffect, useState } from 'react'
import {client} from '../lib/client'
import { motion } from 'framer-motion';
import { Product, FooterBanner, HeroBanner, Pagination } from '../components'
const Home = ({products, bannerData}) => {
// pagination
const [currentPage, setCurrentPage] = useState(1)
const [postsPerPage] = useState(1)
const indexOfLastPost = currentPage * postsPerPage
const indexofFirstPost = indexOfLastPost - postsPerPage
const currentPosts = products.slice(indexofFirstPost, indexOfLastPost)
const paginate = (pageNumber) => setCurrentPage(pageNumber)
// search filter
const [productItems, setProductItems] = useState([])
const [filterWork, setFilterWork] = useState([]);
const [activeFilter, setActiveFilter] = useState('All');
const [animateCard, setAnimateCard] = useState({ y: 0, opacity: 1 });
useEffect(() => {
setProductItems(currentPosts)
setFilterWork(currentPosts)
}, [])
const handleProductFilter = (item) => {
setActiveFilter(item)
setAnimateCard([{ y: 100, opacity: 0 }]);
setTimeout(() => {
setAnimateCard([{ y: 0, opacity: 1 }]);
if (item == 'All'){
setFilterWork(productItems)
}else{
setFilterWork(productItems.slice(0).reverse().map((productItem)=> productItem.tags.includes(item)))
}
}, 500)
}
return (
<>
<HeroBanner heroBanner={bannerData.length && bannerData[0]} />
<div className='products-heading'>
<h2>Best Selling Products</h2>
<p>Smoke accessories of many variations</p>
</div>
<div className='product_filter'>
{['Lighter', 'Pipe', 'Roller', 'Hookah', 'All'].map((item, index) => (
<div
key={index}
className={`product_filter-item app__flex p-text ${activeFilter === item ? 'item-active' : ''}`}
onClick={() => handleProductFilter(item)}
>
{item}
</div>
))}
</div>
<motion.div
animate={animateCard}
transition={{ duration: 0.5, delayChildren: 0.5 }}
>
<div className='products-container'>
{
filterWork.map((product) => <Product key={product._id} product={product} />)
}
</div>
<Pagination postsPerPage={postsPerPage} totalPosts={filterWork.length} paginate={paginate} />
</motion.div>
<FooterBanner footerBanner={bannerData && bannerData[0]} />
</>
)
};
export const getServerSideProps = async () => {
const query = '*[_type == "product"]'
const products = await client.fetch(query)
const bannerQuery = '*[_type == "banner"]'
const bannerData = await client.fetch(bannerQuery)
return {
props: {products, bannerData}
}
}
export default Home
The image below describes my explanation

Answer 1

I realized I wasn't passing in the products that was passed as props into the imported Pagination component to give access to all other Pagination features to work.
So I replaced the filterWork hook
<Pagination postsPerPage={postsPerPage} totalPosts={filterWork.length} paginate={paginate} />
With
<Pagination postsPerPage={postsPerPage} totalPosts={products.length} paginate={paginate} />
I also added currentPosts to data that should be filtered alongside filterWork
<div className='products-container'>
{
filterWork.map((product) => <Product key={product._id} product={product} />)
}
</div>
with
<div className='products-container'>
{
filterWork && currentPosts.map((product) => <Product key={product._id} product={product} />)
}
</div>