Как использовать Tinypaginator с шрифтом в ReactJS?

Я использую библиотеку TinyPagination (реагировать на разбиение на страницы по индивидуальному заказу), и теперь у меня две проблемы:

Во-первых, видимо, Tinypagination получает строку в preKey и nextKey и мне нужно отправить сюда две иконки. Проблема не в этом, ведь если код такой:

 <TinyPagination
          total = {count}
          selectedPageId = {selectedPageId}
          itemPerPage = {itemPerPage}
          renderBtnNumber = {this.renderBtnNumber}
          maxBtnNumbers = {maxBtnNumbers}
          preKey = "PREV"
          nextKey = "NEXT"
          wrapClass = "pageContainer"
          btnsClass = "btnsContainer"
          maxBtnPerSide = {2}
        />

Он работает идеально. Однако мой текущий код с вызовом компонента выглядит следующим образом:

 <TinyPagination
          total = {count}
          selectedPageId = {selectedPageId}
          itemPerPage = {itemPerPage}
          renderBtnNumber = {this.renderBtnNumber}
          maxBtnNumbers = {maxBtnNumbers}
          preKey = {
            <FontAwesomeIcon icon = "angle-left" className = {leftArrowPaginador} value = "angle-left" />
          }
          nextKey = {
            <FontAwesomeIcon
              icon = "angle-right"
              className = "angle-right"
              value = "angle-right"
            />
          }
          wrapClass = "pageContainer"
          btnsClass = "btnsContainer"
          maxBtnPerSide = {2}
        />

Первая проблема возникает в тот момент, когда я даю страницу "назад", а затем страницу "следующий", поскольку каждый раз, когда я выполняю один и тот же процесс, создается новая кнопка "<". (Этого не происходит, когда я отправляю «ПРЕД» и «СЛЕДУЮЩИЙ» соответственно)

Сообщение в консоли выхода (хром) при возникновении этой проблемы:

«Предупреждение: обнаружены два дочерних элемента с одним и тем же ключом, [object Object]. Ключи должны быть уникальными, чтобы компоненты сохраняли свою идентичность при обновлениях. Неуникальные ключи могут привести к дублированию и/или пропуску дочерних элементов — поведение не поддерживается и может измениться в будущая версия».

Мой исходный код:

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import './style.css';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
import { TinyPagination } from '../../../node_modules/react-pagination-custom';

const query = gql`
  query posts($first: Int) {
    posts(first: $first) {
      rows {
        id
        titulo
        image_intro
        category {
          id
        }
      }
      count
    }
  }
`;
let selectedArrow;
export class PaginatorScreen extends Component {
  constructor(props) {
    super(props);
    this.state = { ...props };
    this.changePage = this.changePage.bind(this);
    this.renderBtnNumber = this.renderBtnNumber.bind(this);
    this.selectedPageId = props.selectedPageId;
  }

  changePage = id => {
    this.setState(prevState => ({ ...prevState, selectedPageId: id }));
  };

  buttonPageClick(id) {
    selectedArrow = id;
    if (typeof id.props !== 'undefined') {
      selectedArrow = id.props.value;
    }
    const { selectedPageId } = this.state;

    switch (selectedArrow) {
      case 'angle-left':
        this.changePage(selectedPageId - 1);
        break;
      case 'angle-right':
        this.changePage(selectedPageId + 1);
        break;
      default:
        this.changePage(id);
        break;
    }
  }

  renderBtnNumber(id) {
    const { selectedPageId } = this.state;
    return (
      <button
        type = "button"
        onClick = {this.buttonPageClick.bind(this, id)}
        key = {id}
        className = {`page ${selectedPageId === id ? 'selectedPage' : ''}`}>
        {id}
      </button>
    );
  }

  render() {
    const { selectedPageId } = this.state;
    const itemPerPage = 16;
    const maxBtnNumbers = 10;

    const { data } = this.props;
    if (data.loading) {
      return <div>Loading...</div>;
    }
    if (data.error) {
      return <div>{data.error.message}</div>;
    }

    if (data.posts.rows.length <= 0) {
      return <div>Nada que mostrar...</div>;
    }
    const {
      data: {
        posts: { count },
      },
    } = this.props;
    let listShow = [...data.posts.rows];
    listShow = listShow.splice((selectedPageId - 1) * itemPerPage, itemPerPage);
    let { leftArrowPaginador } = 'angle-left';

    leftArrowPaginador = selectedPageId === 1 ? 'angle-left-disabled' : 'angle-left';
    return (
      <div>
        {listShow.map(i => (
          <Link to = {`/noticias/detalle/${i.category.id}/${i.id}/`} key = {i.id}>
            <h3>{i.titulo}</h3>
            <img
              alt = {i.titulo}
              src = {process.env.REACT_APP_IMG_BASE + i.imagen_intro}
              width = {500}
            />
          </Link>
        ))}
        <TinyPagination
          total = {count}
          selectedPageId = {selectedPageId}
          itemPerPage = {itemPerPage}
          renderBtnNumber = {this.renderBtnNumber}
          maxBtnNumbers = {maxBtnNumbers}
          preKey = {
            <FontAwesomeIcon icon = "angle-left" className = {leftArrowPaginador} value = "angle-left" />
          }
          nextKey = {
            <FontAwesomeIcon
              icon = "angle-right"
              className = "angle-right"
              value = "angle-right"
            />
          }
          wrapClass = "pageContainer"
          btnsClass = "btnsContainer"
          counterStyle = {{ color: 'gray' }}
          spreadClass = "spread-container"
          spreadStyle = {{ padding: '0 0px' }}
          maxBtnPerSide = {2}
        />
      </div>
    );
  }
}

PaginatorScreen.propTypes = {
  selectedPageId: PropTypes.number,
  data: PropTypes.shape({
    loading: PropTypes.bool.isRequired,
    error: PropTypes.shape({ message: PropTypes.string }),
  }).isRequired,
};

PaginatorScreen.defaultProps = {
  selectedPageId: 2,
};

const queryOptions = {
  options: props => ({
    variables: {
      categoryId: props.categoryId,
      first: props.first,
    },
  }),
};

export default graphql(query, queryOptions)(PaginatorScreen);

Хотелось бы, чтобы этого бага не было при нажатии на "Назад" и "Далее". Проблема, которую я обнаружил, по-видимому, связана с шрифтом и переключателем, существующим в коде, потому что, как я уже упоминал, когда я нажимаю «СЛЕДУЮЩИЙ» и «ПРЕДВЕДИТЕЛЬНЫЙ», он работает правильно.

Второй результат, который я хочу, это когда страница равна единице, я хочу, чтобы значок «угол-влево» отображался, но с className = «угол-влево-отключено».

Для этого я сделал следующую переменную, но она не работает, когда я помещаю ее в preKey:

    leftArrowPaginador = selectedPageId === 1? 'angle-left-disabled': 'angle-left';