Mui-Datatable onTableChange is not working when adding a setState

[forjen127]

Everytime I'll add a setState on the function for the onTableChange, it will show this error:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Expected Behavior

Based on the official example, this is how they do it: https://codesandbox.io/s/trusting-jackson-k6t7ot?file=/examples/on-table-init/index.js

Current Behavior

I wanted to get the the tableState.displayData hence, I added this, however, this will result to an error that says:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

 const handleChange = (action, tableState) => {
    console.log(tableState.displayData);
    setDisplayedData(tableState.displayData);
  };

const options = {
    enableNestedDataAccess: ".",
    print: false,
    filterType: "multiselect",
    selectableRows: "none",
    downloadOptions: { filename: "Data.csv", separator: "," },
    expandableRows: true,
    onTableChange: handleChange,
    onTableInit: handleTableChange,

Steps to Reproduce (for bugs)

Your Environment

Tech	Version
Material-UI	5.5.0
MUI-datatables	4.1.2
React	17.0.2
browser	Google Chrome

[Luisddr]

Hi @forjen127 I experimenting the same issue when using setState inside the onTableChange. Have you already solved it?