How to render table footer in XGrid material UI component?

Anyone can help how we can implement table footer to show column total. Is there any method to render custom table footer? As i checked there is no any method to override or append custom table footer.

import React from 'react';
import { XGrid, useGridApiRef } from '@material-ui/x-grid';


const MaterialDataTable = (props) => {

    const renderData = () => {
        if (props.data?.length) {
            return props.data.map(item => {
                return {...item, id: item.postid}
            })
        } else {
            return []
        }
    }
  
  return (
    <div className="customTable" style={{ height: 1440, width: '100%' }}>
      <XGrid 
        rows={renderData()} 
        columns={props.columns} 
        autoHeight
        pageSize={10}
        rowsPerPageOptions={[10, 20, 50]}
        loading={props.loading}
        getRowId={(row) => row.postid}
        onRowClick={(record) => {
            props.rowClick(record.row, record.rowIndex)
        }}
        rowHeight={132}
        pagination={true}
        components={
            {
                
            }
        }
        disableClickEventBubbling
      />
    </div>
  );
}

export default MaterialDataTable;