pagination React[mern]

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

import { Link } from 'react-router-dom';

import axios from 'axios';

import '././component/style/Ds.css';

import { Button,Table,Pagination } from 'react-bootstrap';

export default function Datafetch() {

    const [data,setData]=useState([]);

    const Limit=3;

    const [totalinfo,settotalinfo]=useState(0);

    const [activepage,setActivepage]=useState(1);

    //for pages....

const TotalpageCalc=(totalinfo,Limit)=>{

const Tpages=[];

//console.log(Math.ceil(totalinfo/Limit));

   

  for (let i=1;i<=Math.ceil(totalinfo/Limit);i++) {

    Tpages.push(i);

    

  }

  

  return Tpages;

}

//for pages...

    useEffect(()=>{

      //how to use query params in axios..

let res=axios.get(`http://localhost:8000/myapp`,{

  params:{

    page:activepage,//1

    limit:Limit,

  }

});

res.then(result=>{

// d.json().then(result=>{

    console.log(result)

    //setData(result);

    setData(result.data.Data);

    const d=result.data.Data;

    

    settotalinfo(result.data.total);

   console.log(d[0].username);

//})

}).catch(err=>{

    console.log(err);

})

    },[activepage])

  return (

    <div className="container">

      

      <Table striped bordered hover size="md">

      <thead>

        <tr>

        

          {/* <th>Id</th> */}

          <th>username</th>

          <th>userpass</th>

          <th>Action</th>

        </tr>

      </thead>

      <tbody>

      {data.map((e,index)=><tr className="item" key={index}>

      

          {/* <td>{e[index].id}</td> */}

          <td>{e.username}</td>

          <td>{e.userpass}</td>

          <td>

            <Link to={`/edit/${e.id}`}>Edit</Link>

            <Link to={`/delete/${e.id}`}> delete</Link></td>

        </tr>

        

       )}

     </tbody>

     </Table> 

{/* pagination work */}

     <Pagination >

      <Pagination.First  onClick={()=>setActivepage(1)}/>

    {activepage!==1&&<Pagination.Prev onClick={()=>setActivepage(activepage-1)} />}

{TotalpageCalc(totalinfo,Limit).map((pageno)=>

<Pagination.Item 

active={pageno === activepage}

key={pageno} onClick={()=>setActivepage(pageno)}>{pageno}</Pagination.Item>

)}

      {/* <Pagination.Item>{1}</Pagination.Item>

      <Pagination.Ellipsis />

      <Pagination.Item>{10}</Pagination.Item>

      <Pagination.Item>{11}</Pagination.Item>

      <Pagination.Item active>{12}</Pagination.Item>

      <Pagination.Item>{13}</Pagination.Item>

      <Pagination.Item disabled>{14}</Pagination.Item>

      <Pagination.Ellipsis />

      <Pagination.Item>{20}</Pagination.Item> */}

     {activepage!==Math.ceil(totalinfo/Limit)&& <Pagination.Next onClick={()=>setActivepage(activepage+1)} />}

      <Pagination.Last onClick={()=>setActivepage(Math.ceil(totalinfo/Limit))} />

    </Pagination>

    </div>

  )

}