Как динамически обрабатывать отображение номеров страниц с учетом нумерации страниц? : ReactJS

Я не программист и не разработчик, но у меня есть веб-сайт, созданный кем-то другим, и нумерация страниц выходит из-под контроля.

Изображение:

Как вы можете видеть, в настоящее время у меня есть 17 страниц, которые отображаются на моей навигационной нумерации, но я бы хотел, чтобы они отображались только 10 из них, когда вы находитесь на странице 1, а когда вы нажимаете страницу 2, я бы хотел, чтобы это измените максимальную страницу на страницу 11; когда я нахожусь на странице 3, я хочу, чтобы максимальная отображаемая страница была страницей 12 и так далее.

Я не уверен, как правильно это объяснить, но я хочу, чтобы отображаемые минимальные и максимальные страницы динамически увеличивались, примерно так:

На странице 1: Предыдущий 1 2 3 4 5 Следующий

На странице 5: Предыдущая 3 4 5 6 7 Следующая

Я просмотрел эту ветку, но до сих пор не могу понять, потому что код сильно отличается от того, что использует мой сайт(?)

Это код .jsx:

function NewsRow(props) {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    const fetchAllPosts = async () => {
      try {
        const res = await axios.get("/api")
        setPosts(res?.data);
      } catch (error) {
        console.info(error)
      }
    }

    fetchAllPosts()
  }, [posts.length])

  //save new entries when adding new post on site
  const saveNewEntryHandler = (enteredData) => setPosts(prevPosts => [enteredData, ...prevPosts])

  //PAGINATION
  const [currentPage, setCurrentPage] = useState(1)
  const recordsPerPage = 4
  const numberOfPages = Math.ceil(posts.length / recordsPerPage)
  const lastIndex = currentPage * recordsPerPage
  const firstIndex = lastIndex - recordsPerPage
  const paginatedPosts = posts.slice(firstIndex, lastIndex)
  const numbers = [...Array(numberOfPages + 1).keys()].slice(1)

  const prevPage = () => { if (currentPage !== 1) setCurrentPage(currentPage - 1) }
  const changeCurrentPage = (id) => setCurrentPage(id)
  const nextPage = () => { if (currentPage !== numberOfPages) setCurrentPage(currentPage + 1) }


  return (
    <div className = {styles.content_column} >
      <ImageCarousel />
      <Welcome />

      <NewsInput onSaveNewEntry = {saveNewEntryHandler} fullList = {posts} />

      {paginatedPosts.map((object) => (
        <NewsCard
          key = {object.id}
          id = {object.id}
          title = {object.title}
          date = {object.date}
          description = {object.description}
          image = {object.img} />
      ))}

      <Pagination>

        <PaginationItem
          className = {'paginationItemStyle'}>
          <PaginationLink onClick = {prevPage}>Prev</PaginationLink>
        </PaginationItem>

        {numbers.map((i, key) => (
          <PaginationItem
            key = {key}
            className = {'paginationItemStyle'}
            active = {currentPage === i }>
            <PaginationLink onClick = {() => changeCurrentPage(i)}>
              {i}
            </PaginationLink>
          </PaginationItem>
        ))}

        <PaginationItem
          className = {'paginationItemStyle'}>
          <PaginationLink onClick = {nextPage}>Next</PaginationLink>
        </PaginationItem>

      </Pagination>

    </div>
  )
}

export default NewsRow

и это .scss:

.paginationItemStyle {
    &.page-item {
        button {
            background-color: rgba(47, 53, 59, 0.5);
            border-color: #000000;
            color: #ffffff;
        }
        &.active, &:hover {
            button {
                background-color: rgb(47, 53, 59);
                color: rgb(34,138,252);
            }
        }
    }
}

Я знаю, что нужно изменить const numberOfPages = Math.ceil(posts.length / recordsPerPage) , но понятия не имею, на что именно мне его нужно изменить, а человек, который создал мне этот сайт, недоступен.

Любая помощь очень ценится.

Я поискал в Интернете такие решения, как в этой теме, но не смог найти «код», соответствующий моему собственному.