lastIndex = currentPage * countPerPage;

firstIndex = lastIndex - countPerPage;

const [firstIndex, setFirstIndex] = React.useState(0);

const [lastIndex, setLastIndex] = React.useState(0);

. . .

setFirstIndex(. . .);

setLastIndex(. . .);

import * as React from "react";

import "./styles.css";

const countPerPage = 5;

export default () => {

  const [users, setUsers] = React.useState([]);

  const [slicedUsers, setSlicedUsers] = React.useState([]);

  const [currentPage, setCurrentPage] = React.useState(1);

  const [firstIndex, setFirstIndex] = React.useState(0);

  const [lastIndex, setLastIndex] = React.useState(countPerPage);

  const [allPageCount, setAllPageCount] = React.useState(0);

  const [isLoading, setIsLoading] = React.useState(true);

  React.useEffect(() => {

    fetch("https://jsonplaceholder.typicode.com/posts")

      .then((res) => res.json())

      .then((users) => {

        setUsers(users);

        setLastIndex(currentPage * countPerPage);

        setFirstIndex(lastIndex - countPerPage);

        setSlicedUsers(users.slice(firstIndex, lastIndex));

        setAllPageCount(Math.floor(users.length / countPerPage));

        setIsLoading(false);

      });

  }, []);

  const paginationController = (e, value) => {

    setCurrentPage(value);

    setLastIndex(currentPage * countPerPage);

    setFirstIndex(currentPage * countPerPage - countPerPage);

    setSlicedUsers(users.slice(firstIndex, lastIndex));

  };

  return (

    <>

       setFirstIndex((prev) => prev + 1)}>

        paginate...

      

  );

};

useEffect(() => {

  const newFirstIndex = (currentPage - 1) * countPerPage;

  const newLastIndex = currentPage * countPerPage;

  setSlicedUsers(users.slice(newFirstIndex, newLastIndex));

}, [currentPage, users, countPerPage]);

import React, { useState, useEffect } from "react";

import {

  Container,

  CircularProgress,

  TableContainer,

  Paper,

  Table,

  TableHead,

  TableCell,

  TableBody,

  TableRow,

  Pagination

} from '@mui/material';

function App() {

  const [users, setUsers] = useState([]);

  const [slicedUsers, setSlicedUsers] = useState([]);

  const countPerPage = 5;

  const [currentPage, setCurrentPage] = useState(1);

  const [allPageCount, setAllPageCount] = useState(0);

  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {

    fetch("https://jsonplaceholder.typicode.com/posts")

      .then((res) => res.json())

      .then((data) => {

        setUsers(data);

        setAllPageCount(Math.ceil(data.length / countPerPage));

        setIsLoading(false);

      });

  }, []);

  useEffect(() => {

    const newFirstIndex = (currentPage - 1) * countPerPage;

    const newLastIndex = currentPage * countPerPage;

    setSlicedUsers(users.slice(newFirstIndex, newLastIndex));

  }, [currentPage, users, countPerPage]);

  const paginationController = (e, value) => {

    setCurrentPage(value);

  };

  return (

      sx={{

        display: "flex",

        flexDirection: "column",

        gap: "10px",

        height: "100svh",

        justifyContent: "center",

        alignItems: "center",

      }}

    >

      {isLoading ? (

      ) : (

        <>

            component={Paper}

            sx={{ boxShadow: "0 0 12px #15544b" }}

          >

                  ID

                  Title

                  Body

                {slicedUsers.map((user) => (

                    {user.id}

                    {user.title}

                    {user.body}

                ))}

            count={allPageCount}

            color="primary"

            onChange={paginationController}

          />

      )}

  );

}

export default App;