Создание разбивки на страницы в React с использованием API

Я работаю над созданием разбивки на страницы из pagination response-js-pagination в первый раз, и мне удалось создать компонент и вернуть данные, отображаемые и работающие для того, что ему нужно, но я получаю максимум 500 штук данных из моего API и отображение 500 единиц данных на одной странице не идеально, следовательно, разбивка на страницы. Я пытался вырезать данные из api вот так,

  render() { 


      let { trailsList, chooseTrail } = this.props;
      console.info(trailsList)

      //FOR PAGINATION
      var indexOfLastTrail = this.state.activePage * this.state.itemPerPage;
      var indexOfFirstTrail = indexOfLastTrail - this.state.itemPerPage;
      var renderedTrails = trailsList.slice(indexOfFirstTrail, indexOfLastTrail);

      console.info(renderedTrails)
    let mappedTrails = renderedTrails ?  renderedTrails.map((trail, index) => {
        return 
        <div className='trailsContainer'> 
            <Link onClick = {() => chooseTrail(trail.id)} className='trailButton' to = {{ pathname:`/trail/${trail.id}`}} 
         key = {index}><div>



        <img id='trailImg' src = {trail.imgSmall} alt = {trail.name}></img>
        <h4>{trail.name}</h4>
        <h6>Length: {trail.length + ' miles'}</h6>
        <h6>{trail.location}</h6>

        </div></Link>
        </div>
    }) : 'loading'

и сопоставить нарезанные данные для рендеринга. Я возвращаю сопоставленные данные, а данные не обрабатывались, а моя консоль все еще возвращала, что у меня есть 500 фрагментов данных из этих нарезанных данных. Не уверен, куда идти дальше, как найти информацию о разбивке на страницы с помощью API.

Вот мой полный компонент

class Trails extends Component {
  constructor(){
    super();
    this.state  = {
        activePage:1,
        itemsPerPage: 20
    }
}

componentDidMount() {
axios.get(`https://www.hikingproject.com/data/get-trails? 
lat=${this.props.location.state.latitude}&lon=
${this.props.location.state.longitude}&maxDistance=150
&maxResults=500&key = {API KEY}`).then((res)=> {
    console.info(res.data)
    this.props.getTrails(res.data.trails)
    }).catch(error => {
        console.info(error, 'There was an error finding the trails 
requested.')
    })
  }


handlePageChange = (pageNumber) => {
    console.info(`active page is ${pageNumber}`);
    this.setState({activePage: pageNumber});
  }




  render() { 


      let { trailsList, chooseTrail } = this.props;
      console.info(trailsList)

      //FOR PAGINATION
      var indexOfLastTrail = this.state.activePage * 
this.state.itemPerPage;
      var indexOfFirstTrail = indexOfLastTrail - 
this.state.itemPerPage;
      var renderedTrails = trailsList.slice(indexOfFirstTrail, 
indexOfLastTrail);

      console.info(renderedTrails)
    let mappedTrails = renderedTrails ?  renderedTrails.map((trail, 
index) => {
        return 
        <div className='trailsContainer'> 
            <Link onClick = {() => chooseTrail(trail.id)} 
className='trailButton' to = {{ pathname:`/trail/${trail.id}`}} 
         key = {index}><div>



        <img id='trailImg' src = {trail.imgSmall} alt = {trail.name}></img>
        <h4>{trail.name}</h4>
        <h6>Length: {trail.length + ' miles'}</h6>
        <h6>{trail.location}</h6>

        </div></Link>
        </div>
    }) : 'loading'


    return ( 
    <div className='mainTrails'>
        <div className='container'>
         {/* <div><GoogleMap /></div> */}
            <div>{mappedTrails}</div>
            <p></p>
        <div>


       <div>
           <Pagination
                activePage = {this.state.activePage}
                itemsCountPerPage = {20}
                totalItemsCount = {this.props.trailsList.length}
                pageRangeDisplayed = {5}
                onChange = {this.handlePageChange}
            />
    </div> 
            </div>
        </div>
     </div>
     );
  }
}

const mapStateToProps = state => {
  return {
    trailsList: state.trailsList,
    chooseTrail: state.chooseTrail
  }
}

const mapDispatchToProps = {
  getTrails,
  chooseTrail
}

export default connect(mapStateToProps,mapDispatchToProps)(Trails);