Как сделать динамически изменяемую пагинацию на react?

Я сделал пагинацию, осталось задать ей нужное мне поведение, c этим вот и возникли вопросы.

Вот как это должно выглядеть: Вот как это выглядит у меня:

Код, где я отображаю пагинацию(лишнее, типо className убрал, что бы не засорять код):

{
    pages.map((page) => (
      <span
        role="button"
        tabIndex={0}
        onKeyPress={0}
        onClick={() => {
          dispatch(setCurrentPage(page));
          dispatch(paginatePaintings());
        }}
      >
        {page}
      </span>
    ))
  }

Вот как я высчитываю кол-во страниц:

[fetchPaintings.fulfilled]: (state, action) => {
  state.paintings = action.payload;
  for (let i = 0; i < Math.ceil(state.paintings.length / state.perPage); i += 1) {
    state.pages[i] = i + 1;
  }
}