Uso la interfaz de usuario de material de tabla y

 useEffect(() => { if (props.grouping){ const { groupProperty, rows } = props; const groups = props.rows.reduce((acc, row) => { acc[row[groupProperty]] = acc[row[groupProperty]] || []; acc[row[groupProperty]].push(row);\ return acc; }, {}); setGroups(groups) const keys = Object.keys(groups); setDataGroup(keys) } }, [props.rows,props.schema]); <TableBody> <> {props.grouping && ( dataGroup.map(key => ( <TableRow className={clsx(classes.row, props.rowClassName)}> <TableCell colspan="5"> <CardActions disableActionSpacing> <b> {key} </b> <IconButton className={expanded[key] ? classes.expandOpen : classes.expand} onClick={() => handleExpandClick(key)} aria-expanded={expanded[key]} aria-label="Show more" > <ExpandMoreIcon /> </IconButton> </CardActions> <Collapse in={expanded[key]} timeout="auto" unmountOnExit> <MuiTable {...other}> <TableBody> {groups[key].map(row => ( <TableRow > <TableCell >{row.wageTitle}</TableCell> <TableCell numeric>{row.buy}</TableCell> <TableCell numeric>{row.sell}</TableCell> <TableCell numeric>{row.buyMaximum}</TableCell> <TableCell numeric>{row.sellMaximum}</TableCell> </TableRow> ) )} </TableBody> </MuiTable> </Collapse> </TableCell> </TableRow> )) )}

.....

 <Table grouping={true} rows={tableData} className={classes.table} schema={schema} groupProperty="deductionTypeTitle" ></Table>

Uso este enlace ¿Cómo agrupar la tabla en reactjs? ..Pero quiero que esta agrupación se base en dos datos como este: https://codesandbox.io/s/l9ijbc?file=/demo.js Alguien me puede ayudar