`columns` is marked as required in `ForwardRef(DataGrid)`, but its value is `undefined`

Question

I am having a weird issue with MUI datagrid. Below is the code

const mcolumns=[
    { field: "firstname", headerName: "Firstname" },
    { field: "lastname", headerName: "Lastname"}
]

const pastors = [
    {firstname:"Sherebiah", lastname:"Tisbi"}
]

const Pastorlist = () => {
    return (
        <Box mt={2}>
            <Grid container>
                <Grid item>
                    controls
                </Grid>
                <Grid item>
                    {pastors.length>0
                        ? <DataGrid>
                            rows={pastors}
                            columns={mcolumns}
                            pageSize={5}
                        </DataGrid>
                        : <Typography variant="h6" >No pastor for this church yet!</Typography>
                    }
                </Grid>
            </Grid>
        </Box>
    )
}

I am getting errors

Warning: Failed prop type: The prop `columns` is marked as required in `ForwardRef(DataGrid)`, but its value is `undefined`.

and also

react_devtools_backend.js:3973 Warning: Failed prop type: The prop `rows` is marked as required in `ForwardRef(DataGrid)`, but its value is `undefined`.

I am not sure what is wrong in here. Any help will be much appreciated.

Answer 1

Ok so finally I found the issue. I was passing all props as a children element of DataGrid!!! :) This kind of silly mistakes costs days.!