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

const countPage = 17  // общее количество страниц
const pageLimit = countPage > 7 ? 7 : countPage; // ограничивает количество страниц для просмотра
const page // номер текущей страницы
 
//Необходимо реализовать смещение счетчика при клике по последней странице в строке, т.е. кликнув по 7 странице список сдвинется и отобразятся 7,8,9,10 страницы. Как на скрине 3
 
//это способ который мы пытались сделать, но он имеет баги (скрин 2) 
 
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);
};
 
//

import React from "react";
import styled from "styled-components";
 
const Container = styled.div`
  display: flex;
  justify-content: center;
 
  .Ellipsis:after {
    content: "...";
  }
  .Item {
    padding: 1rem;
    user-select: none;
    border: solid;
    cursor: pointer;
  }
  .Item.Ellipsis {
    border: none;
    cursor: default;
  }
  .Item.Active {
    background-color: yellow;
    cursor: default;
  }
  .Item:hover:not(.Active, .Ellipsis) {
    background-color: orange;
  }
  .Item:not(:last-child) {
    margin-right: 1rem;
  }
`;
const init = (state) => {
  for (let i = 1; i <= state.pageVisible; i++) state.blocks.push(i);
  return state;
};
 
const generateBlocks = (current, visible, max) => {
  const blocks = [];
  const left = Math.floor(visible / 2);
  const right = visible - left - 1;
  let start =
    current <= left
      ? 1
      : current > max - right
      ? max - visible + 1
      : current - left;
 
  for (let i = start; i < start + visible; i++) blocks.push(i);
  return blocks;
};
 
const reducer = (state, action) => {
  const newState = { ...state };
  switch (action.type) {
    case "left":
      newState.pageCurrent =
        state.pageCurrent - 1 < 1 ? 1 : state.pageCurrent - 1;
      break;
    case "right":
      newState.pageCurrent =
        state.pageCurrent + 1 > state.pageMax
          ? state.pageMax
          : state.pageCurrent + 1;
      break;
    case "current":
      newState.pageCurrent = action.payload;
      break;
    default:
      return state;
  }
  newState.blocks = generateBlocks(
    newState.pageCurrent,
    newState.pageVisible,
    newState.pageMax
  );
  return newState;
};
 
export default () => {
  const [s, dispatch] = React.useReducer(
    reducer,
    {
      pageCurrent: 1,
      pageMax: 17,
      pageVisible: 7,
      blocks: []
    },
    init
  );
  return (
    <Container>
      <div className="Item" onClick={() => dispatch({ type: "left" })}>
        {"<"}
      </div>
      {s.pageCurrent > Math.floor(s.pageVisible / 2) + 1 && (
        <>
          <div
            className="Item"
            onClick={() => dispatch({ type: "current", payload: 1 })}
          >
            1
          </div>
          <div className="Ellipsis Item" />
        </>
      )}
      {s.blocks.map((e) => (
        <div
          key={e}
          {...(e !== s.pageCurrent
            ? { onClick: () => dispatch({ type: "current", payload: e }) }
            : {})}
          className={e === s.pageCurrent ? "Active Item" : "Item"}
        >
          {e}
        </div>
      ))}
      {s.pageCurrent < s.pageMax - Math.floor(s.pageVisible / 2) && (
        <>
          <div className="Ellipsis Item" />
          <div
            className="Item"
            onClick={() => dispatch({ type: "current", payload: s.pageMax })}
          >
            {s.pageMax}
          </div>
        </>
      )}
      <div className="Item" onClick={() => dispatch({ type: "right" })}>
        {">"}
      </div>
    </Container>
  );
};