Mui-Datatable onTableChange is not working when adding a setState

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 |