Clicking on rows per page dropdown results in infinite "Uncaught RangeError: Maximum call stack size exceeded."

render() {
const { type } = this.props;
const ocrType = mixConstants.visualAssetType.OCR;

const { assets } = this.props;

const { disableDeleteButton } = this.props;

var windowHeight = $(window).height() - 330;

const minMaxHeightTheme = createMuiTheme({
overrides: {
MUIDataTable: {
responsiveScroll: {
maxHeight: windowHeight,
minHeight: windowHeight,
},
},
},
});

const logoOrTextView = {
name: type === ocrType ? "Image/Text" : "Logo",
options: {
filter: false,
customBodyRender: (value, tableMeta, updateValue) => {
const asset = assets[tableMeta.rowIndex];
const logo = asset.logo;
const calloutText = asset.calloutText;
return logo ? (

) : calloutText ? (
calloutText
) : (
""
);
},
},
};

const imageOrTextName = {
name: "Name",
options: {
filter: false,
customBodyRender: (value, tableMeta, updateValue) => {
const asset = assets[tableMeta.rowIndex];
const imageOrTextName = asset.imageOrTextName;
return imageOrTextName;
},
},
};

const isDefaultImage = {
name: "Default",
options: {
filter: true,
filterType: "checkbox",
customBodyRender: (value, tableMeta, updateValue) => {
const asset = assets[tableMeta.rowIndex];
const isDefault = asset.isDefault;
return (

this.handleDefaultImageCheck(asset)}
/>


);
},
},
};

const deleteAction = {
name: "Delete",
options: {
filter: false,
customBodyRender: (value, tableMeta, updateValue) => {
const asset = assets[tableMeta.rowIndex];
return (
this.removeButtonClicked(asset)}
>
X

);
},
},
};

const modelTrained = {
name: "Model Trained",
options: {
filter: false,
customBodyRender: (value, tableMeta, updateValue) => {
const asset = assets[tableMeta.rowIndex];
const isModelTrained = asset.isModelTrained;
return (
this.handleIsModelTrainedOption(asset)}
>
Yes
No

);
},
},
};

let columns = [
logoOrTextView,
imageOrTextName,
{ name: "Upload Date" },
modelTrained,
isDefaultImage,
deleteAction,
];

let mappedAssetsData = [];

if (assets && assets.length > 0) {
mappedAssetsData = assets.map((asset) => {
const uploadedOn = asset.uploadedOn;
const formattedUploadedOn = uploadedOn
? moment(uploadedOn).format("l")
: "";
return ["", "", formattedUploadedOn, "", "", ""];
});
}

const options = this.props.options
? this.props.options
: {
searchOpen: false,
searchPlaceholder: "Search assets",
filterType: "dropdown",
search: false,
sort: false,
selectableRows: "none",
rowsPerPage: 5,
responsive: "scrollMaxHeight", //scrollMaxHeight OR scrollFullHeight OR stacked
rowsPerPageOptions: [5, 10, 15, 20],
pagination: mappedAssetsData.length > 5 ? true : false,
print: false,
download: false,
viewColumns: false,
filter: false,
searchText: this.searchedText !== "" ? this.searchedText : "",

textLabels: {
body: {
noMatch: "No assets found",
},
pagination: {
rowsPerPage: "Assets per page:",
},
},
};

return (

);
}

## Expected Behavior
It should show the dropdown with selectable rows per page options.

## Current Behavior
App gets stuck in infinite "Uncaught RangeError: Maximum call stack size exceeded."

## Steps to Reproduce (for bugs)
just click on the rows per page dropdown

## My Environment
| Tech | Version |
|--------------|---------|
| Material-UI | 4.9.7 |
| MUI-datatables | 2.14.0 |
| React | 16.13.0 |
| browser | Chrome |

Start in the component render() method shown in the issue and inspect how MUIDataTable receives options, especially rowsPerPageOptions and pagination. Reproduce the failure by clicking the rows-per-page dropdown with the listed React, Material-UI, and MUI-datatables versions. Done means the dropdown opens and its selectable page-size options work without the call-stack error.

Written by the indexing model from the issue text.