Display empty table/datagrid with empty lines in Material UI

I'm trying to display an empty table (ie with no data to display), with a predefined height but with a set of empty lines. By default, the table is displayed with no lines (its background is empty).

I would like to display empty lines. Even, if the number of rows is lower than the maximum number of allowed rows in a page, I would like to complete the display with empty lines.

I tried at least a dirty solution by adding manually an empty line, but even like this the result is not as exptected as the line is squashed and not well displayed. Cf attached image:

Below is the code of my component:

export default function MyComponent()  {
  const classes = useStyles();
  const columns: GridColumns = [
    { 
      field: 'data1', 
      headerName: 'DATA 1', 
      width: 130,
      headerClassName: 'data--header',
      cellClassName: 'data--cell',
    },
    { 
      field: 'data2', 
      headerName: 'DATA 2',
      width: 130,
      headerClassName: 'data--header',
      cellClassName: 'data--cell',
    },
    { 
      field: 'data3', 
      headerName: 'DATA 3',
      width: 130,
      headerClassName: 'data--header',
      cellClassName: 'data--cell',
    },
    { 
      field: 'data4', 
      headerName: 'DATA 4',
      width: 130,
      headerClassName: 'data--header',
      cellClassName: 'data--cell', 
    },
    { 
      field: 'data5', 
      headerName: 'DATA 5',
      width: 130,
      headerClassName: 'data--header',
      cellClassName: 'data--cell',
    },
    { 
      field: 'data6', 
      headerName: 'DATA 6',
      width: 130,
      headerClassName: 'data--header',
      cellClassName: 'data--cell',
     },
  ];
  const rows = [
    { id: "0", data1: "AAA", data2: "BBB", data3: "CCC", data4:"DDD", data5:"EEE", data6: "FFF" },
  ];

  for(var i=1; i<10 ; i++) {
    rows.push({id: i, data1: "", data2: "", data3: "", data4:"", data5:"", data6: ""})
  }

  return (
        <div className={classes.root} style={{ height: 300, width: 700 }}>
          <DataGrid disableColumnMenu hideFooter rowCount="10"rows={rows} columns={columns} rowHeight="30" />
        </div>
        
          
  );
}

Can anybody give my a hint to move on this task ? I'm a bit stuck (and if there is a solution without the manual creation of empty lines it would even be better :-)).

Thank you!