Expand React Bootstrap Table for more granular data

I have a react bootstrap table that displays information about a manager's sales, grouped by manager so I can see their overall performance. I would like to add the capability of clicking on a row and having the table expand to include the data at the sales rep level.

Data:

const SALES = [
          {
          manager: 'Mgr 1', revenue: 49.98, repName: 'Rep 1', forecast: 81.00, 
          },
          {
          manager: 'Mgr 1', revenue: 10, repName: 'Rep 1', forecast: 91.00, 
          },
          {
          manager: 'Mgr 1', revenue: 9.99, repName: 'Rep 13', forecast: 82.00, 
          },
          {
          manager: 'Mgr 2', revenue: 99.99, repName: 'Rep 3', forecast: 101.00, 
          },
          {
          manager: 'Mgr 2', revenue: 9.99, repName: 'Rep 5', forecast: 89.00, 
          },
          {
          manager: 'Mgr 3', revenue: 199.99, repName: 'Rep 6', forecast: 77.00, 
          },
      ];

The following function groups/aggregates my data for my initial table:

function groupByTotal(arr, groupByCols, aggregateCols, counter) {
        const subSet = (o, keys) => keys.reduce((r, k) => (r[k] = o[k], r), {})
        let grouped = {};
        arr.forEach(o => {
          const values = groupByCols.map(k => o[k]).join("|");
          if (grouped[values]) {
            aggregateCols.forEach(col => grouped[values][col] += o[col])
            if (counter) { grouped[values].Count++ }
          } else {
            grouped[values] = subSet(o, groupByCols);
            if (counter) { grouped[values].Count = 1 }
            aggregateCols.forEach(col => grouped[values][col] = o[col])
          }
        })
        return Object.values(grouped);
      }

const groupedSales = groupByTotal(SALES, ['manager'], ['revenue','forecast']);

Building the Table:

const columns = [{
        dataField: 'manager',
        text: 'Sale Owner',
      }, {
        dataField: 'revenue',
        text: 'Revenue',
      }, {
        dataField: 'forecast',
        text: 'Forecast', 
      }];

      const expandRow = {
        renderer: row => (
          // Add rep level data to table below the appropriate manager
        ),
        showExpandColumn: true
      };

return (
   <BootstrapTable
      keyField='manager'
      data={ groupedSales }
      columns={ columns }
      expandRow={ expandRow }
   />  
)

The ideal solution would have it looking something like this:

Can anyone help me create the appropriate expandRow or suggest another way? Thanks.