title: React Material-UI: Populating Rows in DataGrid returns undefined
body: <p>In my React application, I want to fill the rows of a <a href="https://mui.com/x/react-data-grid/row-definition/" rel="nofollow noreferrer">Material-UI Data Grid</a> with backend data.</p>
  <p>To achieve this, I make a GET request to the backend, which returns an AxiosResponse containing the data.</p>
  <p>This AxiosResponse, I store in a variable named <code>list</code>, using <code>useState()</code>.</p>
  <p>Afterwards, I iterate over <code>list</code> to map the data to an Array of Objects, named <code>testrows</code>.</p>
  <p>In the <code>return</code> method with <code>DataGrid</code>, I want to set property <code>row</code> to <code>testrows</code>.</p>
  <p>However on rendering, it returns an error saying that <code>testrow</code> is undefined.</p>
  <p>What am I doing wrong here?</p>
  <pre><code>import ...
  
  export default function FruitList() {
  
      const [list, setList] = useState&lt;AxiosResponse&gt;();
  
      const columns: GridColDef[] = [
          {
              field: 'id',
              headerName: 'Fruit ID',
              type: 'number',
          },
          {
              field: 'type',
              headerName: 'Fruit Type',
              type: 'string',
          },
          {
              field: 'harvest',
              headerName: 'Harvest Date',
              type: &quot;date&quot;,
          },
          {
              field: 'entryDate',
              headerName: 'Entry Date',
              type: &quot;date&quot;,
          },
      ];
  
      // Get list of fruits and store in variable &quot;list&quot;
      useEffect(() =&gt; {
          axios.get('http://localhost:3000/v1/fruit/'
              .then(result =&gt; {
                  setList(result);
              })
      }, [])
  
      let testrows = list?.data.map((element: { id: any, type: any, harvest: any, entryDate: any }) =&gt; {
          return {
              id: element.id,
              type: element.type,
              harvest: element.harvest,
              entryDate: element.entryDate
          }
      }
      );
  
      // also tried useMemo:
         const testrows = useMemo(() =&gt;
           list?.data.map((element: { id: any, type: any, harvest: any, entryDate: any }) =&gt; {
              return {
                  id: element.id,
                  type: element.type,
                  harvest: element.harvest,
                  entryDate: element.entryDate
              }
          }),
      [list?.data]
  );
  
      // console output: &quot;test: undefined&quot;
      console.log(&quot;test: &quot;, testrows);
  
      return (
          &lt;div&gt;
              &lt;div&gt;
                  &lt;DataGrid
                      rows={testrows}
                      columns={columns}
                  /&gt;                    
              &lt;/div&gt;            
          &lt;/div&gt;
      );
  }
  </code></pre>