Как использовать текущее состояние MUI для суммирования и отображения столбцов?

У меня есть веб-приложение MUI, которое я создаю для отслеживания некоторых личных данных.

Я использую MUI datagrid pro для отображения данных, и, как мы знаем, он имеет довольно обширные фильтры в компоненте datagrid.

Я хотел бы отображать суммарные итоги отображаемых в настоящее время отфильтрованных столбцов, а не запрашивать базу данных для получения этих конкретных значений. Кажется, что это должно быть довольно просто, но я не уверен, как получить к нему доступ.

API datagridpro находится здесь: https://mui.com/x/api/data-grid/data-grid-pro/

Мой компонент datagrid построен так:

const fetchData = useCallback(
    async (IDs: string[]) => { 
        response = await fetch("/api/data")
        data = response.json()
        ...
        ...
        ... 


        transformedData = transformData(data)

        return { data: transformedData }, }; 
     [dispatch] );

Это передается через стандартный useEffect для установки состояния с данными.

И метод transformData похож на это:

const transformedData = (data: any) => {
   return data.map((item: any, index: any) => {
  const timestamp = new Date(item.timestamp)

  return {
    id: item.id
    value_1: item.value_1
    value_2: item.value_2
    date: timestamp
    value_3: item.value_3
   };
});
};

Это текущий код, отображающий компонент DataGridPro:

<DataGridPro
    rows = {transformedDataFromFunction}
    sx = {{
      ".MuiDataGrid-row:hover": {
        backgroundColor: "#C2C2C2",
      },
    }}
    columns = {columns}
    editMode = "row"
    rowModesModel = {rowModesModel}
    onRowModesModelChange = {(newModel: typeof rowModesModel) =>
      setRowModesModel(newModel)
    }
    onRowEditStart = {handleRowEditStart}
    onRowEditStop = {handleRowEditStop}
    processRowUpdate = {processRowUpdate}
    componentsProps = {{
      toolbar: { setRowModesModel },
    }}
    slots = {{ toolbar: GridToolbar }}

    // leaving this in here on off chance we don't need MUI
    // experimentalFeatures = {{ newEditingApi: true }}
  />

Опять же, я по существу хочу отобразить суммарные итоги указанных столбцов в отдельном div в верхней части страницы в виде:

Всего Значение 1: сумма (значение_1) | Всего Значение 2: сумма (значение_2) | Всего #: сумма (индекс)

[вставьте сюда данные таблицы]

Опять же, когда я фильтрую на основе сетки данных MUI, я хотел бы отобразить суммарные итоги этих отображаемых столбцов.

Предположим, что value_1 имеет всего 4 строки со значениями, отображаемыми ниже.

    value_1 
   |   3     
   |   4
   |   1
   |   2

Допустим, я хочу отфильтровать по значениям >2.

В компоненте datagridpro это будет отфильтровано и отображено следующим образом:

    value_1 
   |   3     
   |   4

Я хочу показать count отображаемых столбцов, что будет 2, а сумма строк будет 7.

Какие реквизиты API следует использовать для доступа к этому?

Спасибо