Having problem with pagination in react js

I want to create simple pagination however I keep Getting errors, I know exactly what the problem is however I'm not sure how to solve it, the problem is with the data calling if called data.list in getComments the items load but the pagination won't since in handlePageClick it is data.selected

this is my api :

{
  "count": 1134,
  "list": [
   {
    "brand": "28147",
    "category": "Bakery, Bagels, Buns & Rolls",
    "code": "20641213_EA",
    "description": "In Store Baked White Submarine Rolls Pkg. of 4",
    "id": "630b710efe3e956401de6c09",
    "image": "https://assets.shop.loblaws.ca/products/20641213/b1/en/front/[email protected]",
    "inStock": "OK",
    "measurement": "130 g",
    "name": "Submarine Buns 4 Pack",
    "price": 3.99,
    "price_type": "SOLD_BY_EACH",
    "store": "realcanadiansuperstore"
 ....
},

this is my code :

function CategoryPage() {
 const {onAdd} = useStateContext();
 const [items, setItems] = useState([]);
 const [pageCount, setpageCount] = useState(0);
 let limit = 40;
 const {category, store} = useParams();


useEffect(() => {
 const getComments = async () => {
   const res = await fetch(
     `https://api/find? 
     store=${store}&category=${category}&pages=0&items=${limit}`
   );
  const data = await res.json();
  const total = data.count;
  setpageCount(Math.ceil(total / limit))
  setItems(data.list);
};

getComments();
}, [limit]);

const fetchComments = async (currentPage) => {
const res = await fetch(
   `https://api/find? 
 store=${store}&category=${category}&pages=${currentPage}&items=${limit}`
 );
const data = await res.json();
return data;
};

const handlePageClick = async (data) => {
console.log(data.selected);

let currentPage = data.selected + 1;

const commentsFormServer = await fetchComments(currentPage);

setItems(commentsFormServer);

};

this is how i'm mapping the data :

{items.map((product, index) => (
            ... )}

and this is where i'm calling handlePageClick, i'm using react paginate:

<ReactPaginate
    previousLabel={"previous"}
    nextLabel={"next"}
    breakLabel={"..."}
    pageCount={pageCount}
    marginPagesDisplayed={2}
    pageRangeDisplayed={3}
    onPageChange={handlePageClick}
    containerClassName={"pagination justify-content-center"}
    pageClassName={"page-item"}
    pageLinkClassName={"page-link"}
    previousClassName={"page-item"}
    previousLinkClassName={"page-link"}
    nextClassName={"page-item"}
    nextLinkClassName={"page-link"}
    breakClassName={"page-item"}
    breakLinkClassName={"page-link"}
    activeClassName={"active"}
  />