title: React Material Table pageSize is not updated dynamically
body: <p>I am trying to paginate material table data using <strong>TablePagination</strong>. The pageSize property is initially defined as a state variable and updated based on selected pageSizeOptions. But the page size is not updated. It always remains the initial value even though the state is updated.</p>
  <p>The below is the code snippet,</p>
  <pre><code>class Paginate extends Component {
    constructor(props) {
      super(props);
      this.state = {
        data:[//sample data],
        page: 0,
        rowsPerPage: 5,
        totalCount: //total count,
      };
    }
  
  handleChangePage = (event, newPage) =&gt; {
      this.setState({ ...this.state, page: newPage });
    };
  
    handleChangeRowsPerPage = (event) =&gt; {
      this.setState({ ...this.state, rowsPerPage: event.target.value, page: 0 });
    };
  
  render(){
  const { totalCount, rowsPerPage, page , data} = this.state;
  return (
  &lt;MaterialTable
              title=&quot;Paginate&quot;
              data={data}
              columns={columns}
              options={{
                paging: true,
                pageSize: rowsPerPage,
                emptyRowsWhenPaging: true,
                pageSizeOptions: [5, 10, 20, 30, 50, 75, 100],
              }}
              components={{
                Pagination: (props) =&gt; (
                  &lt;TablePagination
                    {...props}
                    count={totalCount}
                    page={page}
                    rowsPerPage={rowsPerPage}
                    onChangePage={this.handleChangePage}
                    onChangeRowsPerPage={this.handleChangeRowsPerPage}
                    component=&quot;div&quot;
                  /&gt;
                ),
              }}
            /&gt;)
  }
  </code></pre>
  <p>when the code is run the page size is set to 5 and 5 records are displayed. When the page size option is changed, the re-rendered page will still have page size 5.</p>