Reactjs – Rows data populated but data not rendered in MUI Datagrid

Here working sample code which i copied from MUI webpages

import * as React from 'react';
import { DataGrid, GridToolbar } from '@mui/x-data-grid';

const rows = [
{
id: 1,
username: '@MUI',
age: 38,
desk: 'D-546',
},
{
id: 2,
username: '@MUI-X',
age: 25,
desk: 'D-042',
},
];

export default function GridSample() {
return (
<div style={{ height: 200, width: '100%' }}>
  <DataGrid
    columns={[
      { field: 'username', hideable: false },
      { field: 'age' },
      { field: 'desk' },
    ]}
    rows={rows}
    slots={{
      toolbar: GridToolbar,
          }}
         
   />
   </div>
   );
   }

Then I apply it with Api data, the data not rendered, but the recordset/rows count populated correctly
Searching solution mostly suggest to set auto height props or container height, but still not working.

Am I missing something here?

import * as React from 'react';
import { DataGrid, GridToolbar } from '@mui/x-data-grid';
import { useState, useEffect } from "react";
import axios from "axios";


export default function VisibleColumnsBasicExample() {

const [products, setProducts] = useState([])

const endpoint = 'http://localhost:3500/catalog'

const getData = async () => {
    await axios.get(endpoint).then((response) => {
        const data = response.data
        setProducts(data)
        console.log(data)
    })
}

useEffect(() => {
    getData()
}, [])

const rows = products

return (
    <div style={{ height: 200, width: '100%' }}>
        <DataGrid
            columns={[
                { field: 'Model Code', hideable: false },
                { field: 'Model Description' },
                { field: 'Price' },
                { field: 'Status' },
                { field: 'Start Date' },
                { field: 'End Date' },
            ]}

            rows={rows}
            slots={{
                toolbar: GridToolbar,
            }}

            getRowId={
                (row) => row.modelCode
            }
        />
    </div>
   );
   }

On the other hand, when I used @mui/material/Table code below, data from the same Api rendered corretly