Как сделать правильную постраничную пагинацию ReactJS?

Всем доброго времени суток. Есть сайт, на нём много страниц с карточками На каждой странице есть вот такая пагинация

Есть вот такие входные данные:

const countPage = 27 // общее количество страниц, но оно не постоянно
const pageLimit = countPage > 7 ? 7 : countPage; // ограничивает количество страниц для просмотра
let page // номер текущей страницы

Необходимо реализовать смещение счетчика при клике по последней странице в строке, т.е. кликнув по 7 странице список сдвинется и отобразятся 7,8,9,10 страницы.

Вот так

это способ который мы пытались сделать, но он имеет баги

const getPaginationGroup = () => {
  let start = Math.floor((page) / pageLimit) * pageLimit; // 7
  return new Array(countPage - page <= pageLimit ? countPage - start + 1 : pageLimit).fill().map((_, idx) => start === 0 ? start + idx + 1 : start + idx);
};