Mui(mui.com) Data Grid – How add a Summary row

I am using Data Table from MUI, docs below.

https://mui.com/material-ui/react-table/#data-table
https://mui.com/

I am trying to add a summary row in my table, but I dont understand how.

Any Idea is apreciated.

My actual code:

import React, { useEffect, useState } from 'react';
import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid';

import './Invoice.scss';

const Invoice = () => {

  const rows = [
    { id: 1, col1: '1', col2: '', col3: 'Power Sweeping1', col4: '', col5: '1', col6: '$1.350,00', col7: '$1.350,00' },
    { id: 1, col1: '1', col2: '', col3: 'Power Sweeping2', col4: '', col5: '1', col6: '$1.350,00', col7: '$1.350,00' },
    { id: 1, col1: '1', col2: '', col3: 'Power Sweeping3', col4: '', col5: '1', col6: '$1.350,00', col7: '$1.350,00' },
  ];

  const columns = [
    { field: 'col1', headerName: '#', width: 10 },
    { field: 'col2', headerName: 'Date', width: 150 },
    { field: 'col3', headerName: 'Product or service', width: 250 },
    { field: 'col4', headerName: 'SKU', width: 150 },
    { field: 'col5', headerName: 'Qty', width: 150 },
    { field: 'col6', headerName: 'Rate', width: 150 },
    { field: 'col7', headerName: 'Amount', width: 150 },
  ];

  return  (
    <div className="container">
      <h1>Invoice</h1>
      <div id='table' className='row'>
        <div style={{ height: 300, width: '100%' }}>
          <DataGrid rows={rows} columns={columns} 
            hideFooterPagination="true"
            hideFooterSelectedRowCount="true"/>
        </div>
      </div>
    </div>
)};

export default Invoice; 

Expectation: