Failed prop type: Invalid prop `children` supplied to `ForwardRef(TableCell)`, expected a ReactNode.

Hey, i have a strange problem. this error (in title) appears on component second render after set state.

Which code should i show you to clear my question?

` import React, { useEffect, useState } from ‘react’; import { connect } from ‘react-redux’; import { Grid, MuiThemeProvider } from ‘@material-ui/core’; import { createMuiTheme } from ‘@material-ui/core/styles’; import MaterialTable from “material-table”; import { Button, Breadcrumb, BreadcrumbItem, Card, CardBody, CardHeader, Col, Row } from ‘reactstrap’; import commands from ‘…/…/…/actions/dataTable/commands’;

function Marketplaces (props) { const {marketplaces, getMarketPlaces} = props; const [multiselection, setMultiselection] = useState(false);

const tableRef = React.createRef();


useEffect(() => {
    getMarketPlaces();
}, []);

const handleEditClick = () => {
  setMultiselection(!multiselection);
};

const columns = marketplaces && [
    ...Object.keys(marketplaces[0]),
].map(col => ({
    title: col.toUpperCase(),
    field:col,
  }));

  let direction = 'ltr';
  // direction = 'rtl';
  
  const theme = createMuiTheme({
    direction: direction,
    palette: {
      type: 'light'
    }
  });
return (
    !!marketplaces ? 
    (<MuiThemeProvider theme={theme}>
      <div style={{ maxWidth: '100%', direction }}>
        <Grid container>
          <Grid item xs={12}>
            <MaterialTable
              tableRef={tableRef}
              columns={columns}
              data={marketplaces}
              editable={{
                onRowAdd: newData =>
                  new Promise(resolve => {
                    setTimeout(() => {
                    //   resolve();
                    //   const data = [...state.data];
                    //   data.push(newData);
                    //   setState({ ...state, data });
                    }, 600);
                  }),
                onRowUpdate: (newData, oldData) =>
                  new Promise(resolve => {
                    setTimeout(() => {
                      resolve();
                    //   const data = [...data];
                    //   data[data.indexOf(oldData)] = newData;
                    //   setState({ ...state, data });
                    }, 600);
                  }),
                onRowDelete: oldData =>
                  new Promise(resolve => {
                    setTimeout(() => {
                    //   resolve();
                    //   const data = [...state.data];
                    //   data.splice(data.indexOf(oldData), 1);
                    //   setState({ ...state, data });
                    }, 600);
                  }),
              }}
              actions={[
                {
                  icon: 'list_alt',
                  tooltip: 'Select multiple',
                  isFreeAction: true,
                  onClick: (event, rowData) => {
                    handleEditClick();
                  }
                }
              ]}
              title="Demo Title"
              options={{
                selection: multiselection,
                filtering: true,
                exportButton: true,
              }}
              onSearchChange={(e) => console.log("search changed: " + e)}
              onColumnDragged={(oldPos, newPos) => console.log("Dropped column from " + oldPos + " to position " + newPos)}
            />
          </Grid>
        </Grid>
      </div>
    </MuiThemeProvider>)
  :
  (<div/>)
);

}

const mapState = state => { const { marketplaces } = state.tables; return { marketplaces }; }

const mapDispatch = dispatch => ({ getMarketPlaces: () => { dispatch(commands.getMarketplaces())}, });

export default connect(mapState, mapDispatch)(Marketplaces); `