Как реализовать пагинацию на react?

Question

[rt_s23]

Я сделал пагинацию, осталось задать ей нужное мне поведение, 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;
      }
    }