So I am trying to achieve pagination functionality. Here I have crypto API and a table where data lies, the thing I want to achieve is displaying 10 items per page. The real problem is that it is showing no errors, but it is not working. When I click on the next page button I am changing the pageNumber but it is not changing the data. I can't figure where the problem lies.

Coin Component

import React,  {lazy, Suspense, useEffect, useState} from 'react'

import {Coin} from '../../interface'

import './Coins.css'

import Pagination from "./Pagination";

const CoinTable = lazy(() => import('../../components/CoinData/CoinTable'))







 export const Coins:React.FC = () => {

  const [coinsData, setCoinsData] = useState<Coin[]>([])

  const [page, setPage] = useState(1);

  const [totalPages, setTotalPages] = useState(10);





  const handlePrevPage = (prevPage: number) => {

    setPage((prevPage) => prevPage - 1);

  };



  const handleNextPage = (nextPage: number) => {

    setPage((nextPage) => nextPage + 1);

  };

   

  



    

    const fetchData= async()=>{

      const response= await fetch(`https://api.coingecko.com/api/v3/coins/markets? 

      vs_currency=usd&order=market_cap_desc&?${page}&per_page=10&sparkline=false`)

      const result = await response.json()

          setCoinsData(result); 

          setTotalPages(totalPages);

      }

      

      useEffect(()=>{

          fetchData()

      })

    return (

        <>

          <Suspense fallback={<div>Loading...</div>}>

          <table className="table" width="80%">  

        <thead>

          <tr>

            <th>Cryptocurrencies</th>

            <th>Price</th>

            <th>24H Change</th>

            <th>Market Cap</th>

          </tr>

        </thead>

        </table>

          {coinsData.map((coin)=>

         <CoinTable key={coin.id}

               {...coin}

                />

          )}

           <Pagination

            totalPages={totalPages}

            currentPage={page}

            handlePrevPage={handlePrevPage}

            handleNextPage={handleNextPage}

          />

          </Suspense>   

         </>

    )

}

Pagination

import React, {  } from "react";

import PropTypes from "prop-types";



 interface Props {

    currentPage: number;

    totalPages: number;

    handleNextPage: (page: number) => void;

    handlePrevPage: (page: number) => void;

  }

const Pagination:React.FC <Props>= ({

  currentPage,

  totalPages,

  handlePrevPage,

  handleNextPage,

}) => {

  return (

    <div className="pagination-button-wrapper">

      <button

        className="pagination-button"

        onClick={() => handlePrevPage(currentPage)}

        disabled={currentPage === 1}

      >

        &larr;

      </button>



      <span className="pagination-page-info">

        Page {currentPage} of {totalPages}

      </span>



      <button

        className="pagination-button"

        onClick={() => handleNextPage(currentPage)}

        disabled={currentPage === totalPages}

      >

       

      </button>

    </div>

  );

};



Pagination.propTypes = {

    currentPage: PropTypes.number.isRequired,

    totalPages: PropTypes.number.isRequired,

    handlePrevPage: PropTypes.func.isRequired,

    handleNextPage: PropTypes.func.isRequired,

  };



export default Pagination