Hello. I try to make a simple table that can select a row of the table and delete this when click the delete button. So.. I use the MDBDataTableV5 component. If I do not put the checkbox in the table then this is working perfectly.(when data of table update) And If I set table data as statically when first loading time then this is working well even I put the checkbox in the table. But this case If I set the data of the table as state dynamically then this is not working. I get this error when re-render(when getting data from parents).

mdbreact.esm.js:1 Uncaught TypeError: Cannot read property 'checked' of undefined
    at n.value .......

Here is my code.

const headCells = [
    {
        label: 'id',
        field: 'user_id',
        width: 150,
        attributes: {
          'aria-controls': 'DataTable',
          'aria-label': 'id',
        },
    },
    {
        label: 'name',
        field: 'user_name',
        width: 200,
    },
    {
        label: 'email',
        field: 'user_email',
        width: 400,
    },
    {
        label: 'level',
        field: 'user_level',
        width: 100
    }
]

export default function WithCheckBoxes(props) {
    const [datatable, setDatatable] = React.useState({
        columns: headCells,
        rows: [],
    });

    useEffect(()=>{
        setDatatable({
            columns: headCells,
            rows: props.user_list
        })
    }, [props]);

  return (
    <>
      <MDBDataTableV5
        hover
        entriesOptions={[5, 20, 25]}
        entries={5}
        pagesAmount={4}
        data={datatable}
        checkbox
        headCheckboxID='id'
        bodyCheckboxID='checkboxes'
        getValueCheckBox={(e) => {

        }}
      />
    </>
  );
}