Page pagination always show the first element React JS

Question

I am trying to set up page pagination Material UI in React, but always redirects to page 1 after 1 seconds showing the right element. I use console log and I can see the the slice is changing 0..1, 1..2 and 2..3 but the content is not.

  {
    this.state.teams
      .slice((this.state.page - 1) * itemsPerPage, this.state.page * itemsPerPage)
      .map((product,index) => (
     
          <TeamCard
            className={stylesMain.TeamCard}
            number={this.state.teams[index]}
            teamNum={this.state.teamNum[index]}
            verified ={this.state.verified[index]}
          />
     

<Pagination
  color="primary"
  count={Math.ceil(resultLength/1)}
  size="small"
  page={this.state.page}
  onChange={this.handleChange2}
  defaultPage={1}
  showFirstButton
  showLastButton
/>

constructor(props){
  super(props);
  this.state = {
    teams: [],
    page: 1
  }
}

handleChange2 = (event, value) => {
  this.setState({page: value});
};

componentDidMount() {
  this.getTeams();
}

Answer 1

Because you are using index . index will be always from 0 to itemsPerPage . So this.state.teams[index] will be the elements of page 1.

You need to use product on the map .