I am using a stripped down version of the example used in the documentation, however I get these errors:

Here's my code:

import Box from '@mui/material/Box';
import { DataGrid, type GridColDef } from '@mui/x-data-grid';

import './App.css'

const columns: GridColDef<(typeof rows)[number]>[] = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'lastName', headerName: 'Last name', width: 150},
  { field: 'firstName', headerName: 'First name', width: 150},
  { field: 'age', headerName: 'Age', type: 'number', width: 110}
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
];

export default function App() {
  return (
    
      
    
  );
}

And here's my package.json:

{
  "name": "my-mui-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.1",
    "@fontsource/roboto": "^5.2.10",
    "@mui/material": "^9.0.0"
  },
  "peerDependencies":{
    "react": "^19.2.4",
    "react-dom": "^19.2.4"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.4",
    "@types/node": "^24.12.2",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^6.0.1",
    "eslint": "^9.39.4",
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.5.2",
    "globals": "^17.4.0",
    "typescript": "~6.0.2",
    "typescript-eslint": "^8.58.0",
    "vite": "^8.0.4"
  }
}

I am just trying to get MUI DataGrid to work.