please why do i see this error when adding pagination, using slice - pagination

Question

i want to add a pagenation to my product and i got an error message that looks like this :
*Unexpected Application Error!
Cannot read properties of null (reading 'slice')
TypeError: Cannot read properties of null (reading 'slice')
at FeaturedProducts (http://localhost:3000/static/js/bundle.js:997:26)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:43746:22)
at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:48322:17)
at beginWork (http://localhost:3000/static/js/bundle.js:49780:20)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:54597:18)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:53795:16)
at workLoopSync (http://localhost:3000/static/js/bundle.js:53709:9)
at renderRootSync (http://localhost:3000/static/js/bundle.js:53678:11)
at recoverFromConcurrentError (http://localhost:3000/static/js/bundle.js:53087:24)
at performSyncWorkOnRoot (http://localhost:3000/static/js/bundle.js:53333:24)
💿 *
These are my codes:
feature.js
import React, { useState } from "react";
import Card from "../Card/Card";
import "./FeaturedProducts.scss";
import useFetch from "../../hooks/useFetch";
import Pagination from "../pagination/Pagination";
const FeaturedProducts = ({ type }) => {
const { data, loading, error } = useFetch(
`/products?populate=*&[filters][type][$eq]=${type}`
);
const [currentPage, setCurrentPage] = useState(1);
const [postPerPage, setPostPerPage] = useState(3);
const indexOfLastPage = currentPage * postPerPage;
const indexOfFirstPage = indexOfLastPage - postPerPage;
const firstPage = data.slice(indexOfFirstPage, indexOfLastPage);
// //change page function
const paginate = (pageNumber) => setCurrentPage(pageNumber);
return (
<div className="featuredProducts">
<div className="top">
<h1>{type} products</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum
suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan
lacus vel facilisis labore et dolore magna aliqua. Quis ipsum
suspendisse ultrices gravida. Risus commodo viverra maecenas.
</p>
</div>
<div className="bottom">
{error
? "Something went wrong!"
: loading
? "loading"
: firstPage.map((item) => <Card item={item} key={item.id} />)}
</div>
<Pagination
postPerPage={postPerPage}
totalPosts={data.length}
paginate={paginate}
/>
</div>
);
};
export default FeaturedProducts;
pagination.js
import React from "react";
const Pagination = ({ postPerPage, totalPosts, paginate }) => {
const pageNumbers = [];
//for loop
for (let i = 1; i <= Math.ceil(totalPosts / postPerPage); i++) {
pageNumbers.push(i);
}
return (
<div>
<ul className="flex mx-auto items-center justify-center h-[55px]">
{pageNumbers.map((number) => (
<li
key={number}
className=" h-[40px] px-[10px] flex items-center justify-center border-[2px] border-blue-500 boreder-solid text-black font-bold"
>
<button
onClick={() => paginate(number)}
className="h-[40px] w-full flex items-center justify-center px-[10px] text-black font-bold"
>
{number}
</button>
</li>
))}
</ul>
</div>
);
};
export default Pagination;
Please someone should help me, why do i get slice is null?