Как проще реализовать для такого случая пагинацию страниц с react-paginate?

Question

[lagudal]

Хочу сделать максимально просто - простейший сайт на реакте, с tailwind css, одна из страниц которого сделана по типу блога. Контент для страниц блога лежит в подпапке проекта, скажем, страница Blog.jsx находится в src/Pages, a страницы с контентом для блога находятся в src/Pages/BlogPages, и имеют имена просто пронумерованные, например от 1 до 100 - 1.jsx, 2.jsx, ...99.jsx, 100.jsx и тд и тп. .Вот эти страницы и должны меняться пагинацией.

Для примера, ниже код для страницы блога, по умолчанию в качестве контента сейчас подключена страница 1.jsx.

Blog.jsx

import React from "react"
import Pagination from "../Components/Pagination"
import Blog1 from "./BlogPages/1"

const Blog = () => {

    return (
        <div>
            <div>
                <Blog1 />
            </div>
            <div className='max-w-[1240px] mx-auto py-3 px-[5px]]'>
                <Pagination  />
            </div>
        </div>
    )
}

export default Blog

Pagination.jsx

import React from "react";
import ReactPaginate from 'react-paginate'
import {BsChevronLeft,BsChevronRight } from "react-icons/bs"

const Pagination = () => {
    return <div>
        <ReactPaginate
        breakLabel={
            <span className="mr-2 sm:mr-4">...</span>
        }
        nextLabel={
            <span className="w-10 h-10 flex items-center justify-center bg-gray-200 rounded-md">
                <BsChevronRight />
            </span>
        }
        // onPageChange={handlePageClick}
        pageRangeDisplayed={3}
        pageCount={100}
        previousLabel={
            <span className="w-10 h-10 flex items-center justify-center bg-gray-200 rounded-md">
                <BsChevronLeft />
            </span>
        }
        containerClassName="w-full md:w-[750px] relative mx-auto flex items-center justify-center mt-8 mb-4 pb-[30px]"
        pageClassName="block border border-solid border-gray-200 hover:bg-gray-200 w-5 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded-md mr-1 sm:mr-4"
        activeClassName="bg-gray-600 text-white"
        marginPagesDisplayed={2}
        onPageChange={() => null}
        previousClassName="absolute left-[calc(50vw-60px)] top-[55px] sm:left-0 sm:top-0"
        nextClassName="absolute right-[calc(50vw-60px)] top-[55px] sm:right-0 sm:top-0" 
        breakClassName="px-1 sm:px-4" 
      />
    </div>
}

export default Pagination;

1.jsx

import React from 'react'

export default function Blog1() {
  return (
    <div>Page 1 content here</div>
  )
}

Подскажите, направьте как проще все это реализовать?