React JS - How to Set my Pagination Pages in the in Reverse Order

Question

How to set My Pagination Pages in Reverse Order then My Recents Posts Display On First Page and Older Posts get in 2nd 3rd ... page number...

Recent Posts on First Page by fetching data from backend

Is Anyone Have an Answer to these Question... here is my pagination Code...

import React, { useState, useEffect } from 'react';
import './Pagination.css'
function Pagination({ pages = 10, setCurrentPage }) {

  //Set number of pages
  const numberOfPages = []
  for (let i = 1; i <= pages; i++) {
    numberOfPages.push(i)
  }

  // Current active button number
  const [currentButton, setCurrentButton] = useState(1)

  // Array of buttons what we see on the page
  const [arrOfCurrButtons, setArrOfCurrButtons] = useState([])

  useEffect(() => {
    let tempNumberOfPages = [...arrOfCurrButtons]

    let dotsInitial = '...'
    let dotsLeft = '... '
    let dotsRight = ' ...'

    if (numberOfPages.length < 6) {
      tempNumberOfPages = numberOfPages
    }

    else if (currentButton >= 1 && currentButton <= 3) {
      tempNumberOfPages = [1, 2, 3, 4, dotsInitial, numberOfPages.length]
    }

    else if (currentButton === 4) {
      const sliced = numberOfPages.slice(0, 5)
      tempNumberOfPages = [...sliced, dotsInitial, numberOfPages.length]
    }

    else if (currentButton > 4 && currentButton < numberOfPages.length - 2) {               // from 5 to 8 -> (10 - 2)
      const sliced1 = numberOfPages.slice(currentButton - 2, currentButton)                 // sliced1 (5-2, 5) -> [4,5] 
      const sliced2 = numberOfPages.slice(currentButton, currentButton + 1)                 // sliced1 (5, 5+1) -> [6]
      tempNumberOfPages = ([1, dotsLeft, ...sliced1, ...sliced2, dotsRight, numberOfPages.length]) // [1, '...', 4, 5, 6, '...', 10]
    }
    
    else if (currentButton > numberOfPages.length - 3) {                 // > 7
      const sliced = numberOfPages.slice(numberOfPages.length - 4)       // slice(10-4) 
      tempNumberOfPages = ([1, dotsLeft, ...sliced])                        
    }
    
    else if (currentButton === dotsInitial) {
      // [1, 2, 3, 4, "...", 10].length = 6 - 3  = 3 
      // arrOfCurrButtons[3] = 4 + 1 = 5
      // or 
      // [1, 2, 3, 4, 5, "...", 10].length = 7 - 3 = 4
      // [1, 2, 3, 4, 5, "...", 10][4] = 5 + 1 = 6
      setCurrentButton(arrOfCurrButtons[arrOfCurrButtons.length-3] + 1) 
    }
    else if (currentButton === dotsRight) {
      setCurrentButton(arrOfCurrButtons[3] + 2)
    }

    else if (currentButton === dotsLeft) {
      setCurrentButton(arrOfCurrButtons[3] - 2)
    }

    

    setArrOfCurrButtons(tempNumberOfPages)
    setCurrentPage(currentButton)
  }, [currentButton])



  return (
    <div className="pagination-container">
      <a
        href="#"
id='Previous'
        className={`${currentButton === 1 ? 'disabled' : ''}`}
        onClick={() => setCurrentButton(prev => prev <= 1 ? prev : prev - 1)}
      >
        Prev
      </a>

      {arrOfCurrButtons.map(((item, index) => {
        return <a
          href="#"
          id='Buttons'
          key={index}
          className={`${currentButton === item ? 'active' : ''}`}
          onClick={() => setCurrentButton(item)}
        >
          {item}
        </a>
      }))}

      <a
        href="#"
        id='Next'
        className={`${currentButton === numberOfPages.length ? 'disabled' : ''}`}
        onClick={() => setCurrentButton(prev => prev >= numberOfPages.length ? prev : prev + 1)}
      >
        Next
      </a>
    </div>
  );
}


export default Pagination

Section.js { Where is my Posts Displayed By Pagination }

import React, { useState, useEffect, useRef } from 'react'
import './Section.css'
import { Link } from "react-router-dom";
import Pagination from './Pagination/Pagination';


function Section() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const componentMounted = useRef(true);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(12);


  useEffect(() => {
    const Fetchpost = async () => {
      setLoading(true);
      const response = await fetch('http://localhost:5000/posts');
      if (componentMounted.current) {
        setPosts(await response.json([]));
        setLoading(false);
      }
      return () => {
        componentMounted.current = false;
      }
    }
    Fetchpost();
  }, []);



  if (loading && posts.length === 0) {
    return <h2>Loading...</h2>
  }

  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost).reverse();
  const howManyPages = Math.ceil(posts.length/postsPerPage);

  console.log(posts);
  return (
    <>
      <div className="mainsectiontop">
        <div className="mainmainsection">
          {
            posts.length ? (
              currentPosts.slice(0).reverse().map((post) => {
                return (
                  <div key={`/${post._id}`} className="samplemain">
                    <div className="samplecontainer">
                      <Link to={post._id}  >
                        <div key={post._id} className="r1">
                          <img className='sectionimg' src={`http://localhost:5000/${post.image}`} alt="myimg" />
                          <h1 className="heading">Download {post.title}</h1>
                        </div>
                      </Link>
                    </div>
                  </div>
                )
              })
            ) : (
              <p style={{ marginTop: "2rem" }}>
                No posts to display.
              </p>
            )
          }
          
        </div>
        <Pagination pages = {howManyPages} setCurrentPage={setCurrentPage}/>
      </div>
    </>
  )
}

export default Section