Unable to go to next page using the onChange function in MaterialTable - reactjs

Question

I'm trying to change the page in MaterialTable but am unable to do so. Although, the page size functionality is working but the page change functionality isn't.
Here is my state:
constructor(props) {
super(props)
this.state = {
status: false,
message: "",
page: 0,
pageSize: 5,
}
}
And inside MaterialTable, I have this:
<MaterialTable
title=""
page={this.state.page}
totalCount={this.props.operations.ids ? this.props.operations.ids.length : 0}
columns={[
{
title: 'Sr No.', field: 'serialNumber', render: rowData => {
return _.findIndex(renderingData, { "id": rowData.id }) + 1
}
},
{ title: 'Time Stamp', field: 'date', render: rowData => { return moment(rowData.date).format("YYYY/MM/DD hh:mm a") } },
{ title: 'Details', field: 'name' },
{
title: 'View Details', field: 'viewDetails', render: rowData => {
return <Button
variant="contained"
color={"primary"}
onClick={() => this.props.setTab(rowData)}
>View</Button>
}
},
]}
onChangePage={(page, pageSize) => {
this.setState({ ...this.state, page, pageSize})
}}
data={renderingData}
/>
Let me know if any modification is required for this. I still haven't been able to solve the problem.

Answer 1

clicking on next button , you also need to increase the page number
onChangePage={(event,page ) => { this.setState({ ...this.state, page}) }}
also change
function handleChangeRowsPerPage(event) { setRowsPerPage(+event.target.value); }

Answer 2

Ok, so the problem was that the data that goes into Material Table was the same even after clicking the Next page button. I went around it by adding this in the data. The rest of the code is the same.
data={renderingData.slice(this.state.page*this.state.pageSize, this.state.page*this.state.pageSize + this.state.pageSize)}
This code makes sure that new data is present when you click on next page.