Я реализую материал-Ui-flat реагировать на разбиение на страницы

Мне нужно реализовать логику разбиения на страницы в моем приложении. Я показываю список вакансий из API фрилансера, и я использую https://www.npmjs.com/package/material-ui-flat-pagination для реализации нумерации страниц. Вот мой код, я следовал синтаксису компонента. Я могу отображать номера страниц, но функция onClick не работает. Как я могу отображать только 10 заданий, когда я нажимаю на определенные номера страниц. Любая помощь приветствуется.

 this.state = {
  listOfJobs: [],
  freelancerApiInProgress: true,
  isFreelancerApiSuccess: true,
  savedGigs: [],
  isSavedJobs: false,
  offset: 0

  };
  this.handleClick = this.handleClick.bind(this)
 }
   handleClick(offset) {
    this.setState({
      offset
   });
 }
componentDidMount() {
let interval = window.setInterval(() => {
  clearInterval()
  if (uid !== null) {
    clearInterval(interval);
    const promise1 = this.fetchSavedGigs();
    const promise2 = this.fetchFreelancerJobs();
    let currentState = this.state;

    Promise.all([promise1, promise2]).then(values => {
      console.info(values);
      const savedGigs = values[0];
      const freelancerJobs = values[1].data.result.projects;
      freelancerJobs.forEach(project => {
        currentState.listOfJobs.push({
          bid_avg: project.bid_stats.bid_avg,
          bid_count: project.bid_stats.bid_count,
          budget_minimum: project.budget.minimum,
          budget_maximum: project.budget.maximum,
          frontend_project_status: project.frontend_project_status,
          time_submitted: project.time_submitted,
          title: project.title,
          type: project.type,
          preview_description: project.preview_description,
          id: project.id,
          isLiked: this.checkIfGigIsSaved(savedGigs, project.id)
        });
      });

      this.setState({
        listOfJobs: currentState.listOfJobs,
        isFreelancerApiSuccess: true,
        freelancerApiInProgress: false,
        savedGigs: savedGigs
      });
    });
  }
}, 250);

}

// Здесь я реализую логику разбивки на страницы. Карточка заданий — это дочерний компонент, где у меня есть макет, отображаемый на карточке.

               <MuiThemeProvider theme = {theme}>
                      <CssBaseline />
                        <Pagination
                        limit = {10}
                        offset = {this.state.offset}
                        total = {this.state.listOfJobs.length}
                        onClick = {(e, offset) => 
                         this.handleClick(offset)}
                        />
                    </MuiThemeProvider>

                  {this.state.listOfJobs.map((jobItem, index) => (
                      <div key = {index} className = "list-of-jobs">

                        <JobCard
                          job = {jobItem}
                          handleGigSave = {this.handleGigSave}
                          handleGigUnSave = {this.handleGigUnSave}
                          index = {index}
                          isLiked = {jobItem.isLiked}
                        />