Cannot read properties of undefined (reading 'prepareStyles') in ListItem from material UI in react – Reactjs

I am making sure that the rows is filled and defined before using, but why is the error coming, i am not able to understand , it is been a week now , i am stuck here,

How to solve this please !

return isSmallScreen ? (
        <div>
            <List sx={{ width: "100%" }}>
                {rows &&
                    rows.map((row) => (
                        <ListItem>
                            <ListItemText primary={row.name}></ListItemText>
                        </ListItem>
                    ))}
            </List>
        </div>
    ) : (
        <DataGrid
            className=""
            getRowId={(row) => row._id}
            rows={rows}
            columns={columns}
            pageSize={30}
            rowsPerPageOptions={[30]}
            disableSelectionOnClick
            experimentalFeatures={{ newEditingApi: true }}
            autoHeight={true}
            autoPageSize={true}
            selectionModel={selectedRows}
            onSelectionModelChange={(ids) => {
                setSelectedRows(ids);
            }}
        />
    );