Custom GroupRow rendering (mbrn/MaterialTable) React

I am customizing groupRow of mbrn/material-table, But I don't find any documents for doing it.

https://material-table.com/#/docs/features/grouping

So far I managed to make the groupRow and its working fine. But now I don't know how to render the table row on expanding the groupRow.

I tried using MTableBody but the records are not showing up

 <tr className="MuiTableRow-root">
    <td
      className="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-paddingNone MuiTableCell-body py-2"
      colSpan={visiblecolumns + isGroupedAndHidden}
    >
      <button className="d-flex Card w-100">
        <div className="ml-3 text-left">
          <div className="text--bold text--muted text--xs">
            {props.groups[0].title}
          </div>
          <div className="pt-1 pb-1">
            {groupheader.title == 'Priority' ? (
              <Priority value={groupData.value} />
            ) : groupheader.title == 'Time' ? (
              <DateFormatter value={groupData.value} relative={true} />
            ) : (
              groupData.value
            )}
          </div>
        </div>
        <div className="ListGroupHeader__meta d-flex align-items-center justify-content-end">
          <span className="ListGroupHeader__count ml-3 mr-1">
            {alerts.length}
          </span>{' '}
          alert{alerts.length > 1 ? 's' : ''}
          <ChevronRight
            className="text-muted"
            style={{ fontSize: '30px' }}
          />
        </div>
      </button>
      <MTableBody {...props} />
    </td>
  </tr>

This is how my code looks like. Am so confused I don't know what am missing to make it work

CodeSandBox: https://codesandbox.io/s/festive-bell-5d76e

Provided by your reference, the documentation say

You can override grouped row component with overriding components.GroupRow

That's exactly what you did, you overrated the entire component, but that component had a lot of functionality that you've missed like the Expanding and showing the content of the group.

This is the original component - https://github.com/mbrn/material-table/blob/master/src/components/m-table-group-row.js

So what you had do is copy and change or create your own component with the same functionality.

In the next example, I took the original component and changed it according to your structure (this is far from perfect, just showing you the way). I copied MTableGroupRow and MTableCell (because Cell component is part of TableRow and had to change) and called them CustomGroupRow and CustomCell.

https://codesandbox.io/s/frosty-forest-su2dl