DataGrid blank/not displaying data? Material UI

For some reason my DataGrid table is not displaying anything.

Example of my data and DataGrid not displaying anything in new project with source code from below

I had this issue happen in my previous project and I thought it was something I did when trying to learn everything so I made another project, setup reactjs and material ui and tried again and had the same issue.

I made a bug report on GitHub but I am really looking for a quick solution. Does anyone have any ideas? Everything in my project has been updated to the latest version (including django and mui libraries)

import React, { useEffect, useState } from "react"
import jQuery from 'jquery'
import { Container } from '@mui/material';
import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid'


function WatcherOverview() {
    
      const columns = [
        { field: 'id', headerName: 'ID', width: 90 },
        {
          field: 'firstName',
          headerName: 'First name',
          width: 150,
          editable: true,
        },
        {
          field: 'lastName',
          headerName: 'Last name',
          width: 150,
          editable: true,
        },
        {
          field: 'age',
          headerName: 'Age',
          type: 'number',
          width: 110,
          editable: true,
        },
        {
          field: 'fullName',
          headerName: 'Full name',
          description: 'This column has a value getter and is not sortable.',
          sortable: false,
          width: 160,
          valueGetter: (params) =>
            `${params.row.firstName || ''} ${params.row.lastName || ''}`,
        },
      ];
      
      const rows = [
        { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
        { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
        { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
        { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
        { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
        { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
        { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
        { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
        { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
      ];

      return (
        <Container>
          <h1>Single items:</h1>
          <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
      />
        </Container>
      );
    }

export default WatcherOverview