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