I am trying to render an array data to MUI datagrid. below are the details. Its using Big Query as the source. I tried the table way but it does not have sorting and pagination.

Hence, I am trying to use datagrid.How should i call the array to render it in MUI datagrid

const BigQueryFetcher = () => {
   const [auditTimestamp, setAuditTimestamp] = useState('');
  const [agentName, setAgentName] = useState('');
  const [queryResult, setQueryResult] = useState();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [theme, colorMode] = useMode();
  const [isSidebar, setIsSidebar] = useState(true);

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await axios.post('http://localhost:3001/bigquery-data', {
        auditTimestamp,
        agentName
      });
    console.log(response.data);
    setQueryResult(response.data);
    } catch (error) {
      console.error('Error fetching data:', error);
      setError('Failed to fetch data. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  const renderDataGrid = (data) => {
    if (!Array.isArray(data) || data.length === 0) {
      return null;
    }


    const keys = Object.keys(data[0]);

    return (
      <DataGrid
          rows={rows}
          columns={columns}
          components={{ Toolbar: GridToolbar }}
        />
      
    );
  
};

I tried the below code

<DataGrid
          rows={rows}
          columns={columns}
          components={{ Toolbar: GridToolbar }}
        />