title: The data grid component requires all rows to have a unique `id` property
body: <p>I know I have to use getRowId, but how do I use <code>statId</code> in oppose to <code>id</code>? It is unique. Or generate an <code>id</code> property for each one of them?</p>
  <blockquote>
  <p>Error: MUI: The data grid component requires all rows to have a unique <code>id</code> property.
  Alternatively, you can use the <code>getRowId</code> prop to specify a custom id for each row.
  A row was provided without id in the rows prop:
  {&quot;statId&quot;:813183,&quot;teamId&quot;:3,&quot;season&quot;:2021,&quot;name&quot;:&quot;Atlanta Hawks&quot;,&quot;team&quot;:&quot;ATL&quot;,&quot;wins&quot;:41,&quot;losses&quot;:31,&quot;fieldGoalsMade&quot;:3492.1,&quot;fieldGoalsAttempted&quot;:7468.1,&quot;fieldGoalsPercentage&quot;:55.6,&quot;twoPointersMade&quot;:2427.9,&quot;twoPointersAttempted&quot;:4612.1,&quot;twoPointersPercentage&quot;:62.5,&quot;threePointersMade&quot;:1064.2,&quot;threePointersAttempted&quot;:2856,&quot;threePointersPercentage&quot;:44.3,&quot;freeThrowsMade&quot;:1684.8,&quot;freeThrowsAttempted&quot;:2074.8,&quot;freeThrowsPercentage&quot;:96.5,&quot;offensiveRebounds&quot;:903.6,&quot;defensiveRebounds&quot;:3002.2,&quot;rebounds&quot;:3905.9,&quot;assists&quot;:2065.3,&quot;steals&quot;:598.1,&quot;blockedShots&quot;:405.4,&quot;turnovers&quot;:1086.7,&quot;personalFouls&quot;:1655.1,&quot;points&quot;:9733.2,&quot;doubleDoubles&quot;:120.1,&quot;tripleDoubles&quot;:1.4}</p>
  </blockquote>
  <pre><code>import { useState, useEffect } from 'react';
  import type { NextPage } from 'next';
  import Container from '@mui/material/Container';
  import Box from '@mui/material/Box';
  import { DataGrid, GridColDef, GridRowIdGetter } from '@mui/x-data-grid';
  import { Grid, Paper, Typography } from '@mui/material';
  import Skeleton from '@mui/material/Skeleton';
  import { blue } from '@mui/material/colors';
  
  import FormOne from './../src/FormOne';
  import { TeamSeason } from './../src/lib/interfaces/TeamSeason';
  
  const LoadingSkeleton = () =&gt; (
    &lt;Box
      sx={{
        height: 'max-content',
      }}
    &gt;
      {[...Array(10)].map((_, index) =&gt; (
        &lt;Skeleton variant=&quot;rectangular&quot; sx={{ my: 4, mx: 1 }} key={index} /&gt;
      ))}
    &lt;/Box&gt;
  );
  
  const columns: GridColDef[] = [
    { field: 'statId', headerName: 'Stat ID' },
    { field: 'name', headerName: 'Name', width: 300 },
    { field: 'season', headerName: 'Season', width: 600 },
  ];
  
  const Home: NextPage = () =&gt; {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
  
    useEffect(() =&gt; {
      setInterval(
        () =&gt;
          fetch('https://localhost:7000/TeamSeason/2021')
            .then((response) =&gt; response.json())
            .then((data) =&gt; {
              setData(data);
              setLoading(false);
            }),
        3000
      );
    }, []);
  
    return (
      &lt;Container
        maxWidth={false}
        sx={{
          height: '100vh',
          overflow: 'auto',
          background: `linear-gradient(to right, ${blue[200]}, ${blue[500]})`,
        }}
      &gt;
        &lt;Container maxWidth=&quot;lg&quot; sx={{ mt: 3, mb: 3 }}&gt;
          &lt;Grid container spacing={{ xs: 2, md: 3 }}&gt;
            &lt;Grid item xs={12} md={6}&gt;
              &lt;Paper sx={{ padding: 3 }}&gt;
                &lt;FormOne data={data} /&gt;
              &lt;/Paper&gt;
            &lt;/Grid&gt;
  
            &lt;Grid item xs={12} md={6}&gt;
              &lt;Paper sx={{ padding: 3 }}&gt;&lt;/Paper&gt;
            &lt;/Grid&gt;
  
            &lt;Grid item xs={12}&gt;
              &lt;Paper sx={{ padding: 3 }}&gt;
                &lt;DataGrid
                  sx={{ height: '650px' }} // either autoHeight or this
                  rows={data}
                  columns={columns}
                  pageSize={10}
                  // autoHeight
                  rowsPerPageOptions={[10]}
                  disableSelectionOnClick
                  disableColumnMenu
                  disableColumnSelector
                  components={{
                    LoadingOverlay: LoadingSkeleton,
                  }}
                  loading={loading}
                /&gt;
              &lt;/Paper&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/Container&gt;
      &lt;/Container&gt;
    );
  };
  
  export default Home;
  
  </code></pre>
  <pre><code>export interface TeamSeason {
    statId: number;
    teamId: number;
    season: number;
    name: string;
    team: string;
    wins: number;
    losses: number;
    fieldGoalsMade: number;
    fieldGoalsAttempted: number;
    fieldGoalsPercentage: number;
    twoPointersMade: number;
    twoPointersAttempted: number;
    twoPointersPercentage: number;
    threePointersMade: number;
    threePointersAttempted: number;
    threePointersPercentage: number;
    freeThrowsMade: number;
    freeThrowsAttempted: number;
    freeThrowsPercentage: number;
    offensiveRebounds: number;
    defensiveRebounds: number;
    rebounds: number;
    assists: number;
    steals: number;
    blockedShots: number;
    turnovers: number;
    personalFouls: number;
    points: number;
    doubleDoubles: number;
    tripleDoubles: number;
  }
  
  </code></pre>