PAGINATION using react/Paginate

Hello everyone, let's build a new feature with this article (i.e. pagination) many of you are already aware and have seen this feature in many websites with lots of data so here let's build one for our application as a beginner.
let's first install the library.
if you use npm

npm install react-paginate

if you use yarn

yarn add react-paginate

In this article, our main aim is to work on the logic and implementation of pagination so let's just import fake data to display on different pages. I have used Fake-data to create fake data just for testing our pagination feature you can do the same.
Our code and website before pagination feature.

import react, {useState} from 'react';
import fakedata from "./Fake_data.json"
import './App.css';

function App() {

  const [data, setData] =useState(fakedata.slice(0,50));
  return (
    <>
     <div className="header"> <h2>WELCOME TO FAKEDATA WORLD</h2></div>
    <div className="App">
    { data.map((x)=>{
      return(
        <div className="card">
          <h3>{x.FullName}</h3>
          <h3>{x.CompanyName}</h3>
          <h3>{x.URL}</h3>
          </div>
      );
    })
    }    
    </div>
    </>
  );
}

export default App;

.header
{
  color: black;
  text-align: center;
  cursor: pointer;
  font-style: italic;
  font-family: fantasy;
  background: blueviolet;
}

.App{
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  color: grey;
  background-color: pink;
}

.card{

    border: 2px solid grey;
    border-radius: 10px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 300px;
    height: 300px;
    margin: 20px;
}

import react, {useState} from 'react';
import Paginate from 'react-paginate';
import fakedata from "./Fake_data.json"
import './App.css';

// let's make a funtion for diaplaying data
function App() {

  const [data, setData] =useState(fakedata.slice(0,40));
  const [pageNumber, setPageNumber] =useState(0);
  const dataPerPage =6;
  const pageVisited = pageNumber * dataPerPage;

  // making function for fetching data
  const fetchData = data.slice(pageVisited, pageVisited + dataPerPage).map((x)=>{
    return(
      <div className="card">
        <h3>{x.FullName}</h3>
        <h3>{x.CompanyName}</h3>
        <h3>{x.URL}</h3>
        </div>
    );
  })
// we are using ceil function here because if it not proper divisible value then we need an extra page for
// the remainder
const pageCount = Math.ceil(data.length/dataPerPage)

// function for page change set the page we are currently on
const changePage = ({selected}) => {
  setPageNumber(selected);
}
  return (
    <>
     <div className="header"> <h2>WELCOME TO FAKEDATA WORLD</h2></div>
    <div className="App">
      {fetchData}
      <Paginate
      previousLabel ={"Prev"}
      afterLabel ={"After"}
      pageCount ={pageCount}
      onPageChange={changePage}
      containerClassName={"paginationBttns"}
      previousLinkClassName={"previousBttn"}
      nextLinkClassName={"nextBttn"}
      disabledClassName={"paginationDisabled"}
      activeClassName={"paginationActive"}

      />
    </div>
    </>
  );
}

export default App;

It's CSS code

.header
{
  color: black;
  text-align: center;
  cursor: pointer;
  font-style: italic;
  font-family:cursive;
}

.App{
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  color: grey;
  background-color: black;
}

.card{

    border: 2px solid grey;
    border-radius: 10px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: cursive;
    width: 300px;
    height: 300px;
    margin: 20px;
}
.paginationBttns {
  width: 80%;
  height: 40px;
  list-style: none;
  display: flex;
  justify-content: center;
}

.paginationBttns a {
  padding: 10px;
  margin: 6px;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 2px solid grey;
  display: inline-block;
  color: black;
  cursor: pointer;
  background-color: white;
  text-align: center;
}

.paginationBttns a:hover {
  color: white;
  background-color: grey;
}

.paginationActive a {
  color: white;
  background-color: blue;
}

.paginationDisabled a {
  color: pink;
  background-color: pink;
}