States are not updating in customBodyRender

const [catalogClass, setCatalogClass] = useState({});
customBodyRender: (_, tableMeta) => {
// updateValue("here");
const value = catalogClass[tableMeta.rowData[1]];
console.log("here", value, _, tableMeta);
return (
<>
{
e.stopPropagation();
e.preventDefault();
}}
onChange={e => handleChange(e, tableMeta)}
disableUnderline
MenuProps={{
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
},
transformOrigin: {
vertical: "top",
horizontal: "left"
},
getContentAnchorEl: null,
MenuListProps: { disablePadding: true },
PaperProps: { square: true }
}}
>
{catalogClassesData &&
catalogClassesData.map(value => {
const formattedContenClass = formatToTitleCase(value);
return (

{formattedContenClass}

);
})}


);
}
The state inside catalogClass is {} even the state change outside

Start at the customBodyRender callback and reproduce the shown Select usage with catalogClass initially empty and then updated outside the callback. Trace whether the callback observes the changed state, and consider the issue done when the rendered Select reflects the updated catalogClass value.

Written by the indexing model from the issue text.