Using react-markdown with Material-UI table

I'm trying to parse a markdown table using react-markdown and rendering the resulting tags using the Material-UI table component. Here's my renderer:

import withStyles from '@material-ui/core/styles/withStyles';
import PropTypes from 'prop-types';
import TableCell from '@material-ui/core/TableCell';

const styles = (theme) => ({
  root: {
    marginBottom: theme.spacing(2),
  },
});

const RenderedTCell = ({rendererProps, classes}) => {
  if(rendererProps.children.length !== 0) {
    console.log('rendererProps.children', rendererProps.children);
  }
  return (
    <TableCell className={classes.td} {...rendererProps} />
  );
};

RenderedTCell.propTypes = {
  classes: PropTypes.shape({
    root: PropTypes.string,
  }).isRequired,
};

export default withStyles(styles)(RenderedTCell);

The markdown renderer for all table tags is defined as follows:

const renderers = {
    tableCell: (props) => (
      <RenderedTCell
        rendererProps={props}
      />
    ),
    tableRow: (props) => (
      <RenderedTRow
        rendererProps={props}
      />
    ),
    tableBody: (props) => (
      <RenderedTBody
        rendererProps={props}
      />
    ),
    tableHead: (props) => (
      <RenderedTHead
        rendererProps={props}
      />
    ),
    table: (props) => (
      <RenderedTable
        rendererProps={props}
      />
    ),
  };

Here, all other elements (table, tableHead, tableBody, tableRow) render fine, but the tableCell element keeps throwing an error:

Error while running `getDataFromTree` TypeError: Cannot read property 'charAt' of null
at capitalize (/home/ubuntu/proost/web/node_modules/@material-ui/core/utils/capitalize.js:19:17)
at Object.TableCell [as render] (/home/ubuntu/proost/web/node_modules/@material-ui/core/TableCell/TableCell.js:183:148)
at a.b.render (/home/ubuntu/proost/web/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:46:105)
at a.b.read (/home/ubuntu/proost/web/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)
at renderToStaticMarkup (/home/ubuntu/proost/web/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:462)
at process (/home/ubuntu/proost/web/node_modules/@apollo/react-ssr/lib/react-ssr.cjs.js:38:16)
at process._tickCallback (internal/process/next_tick.js:68:7)

Any idea what might be breaking the code?

I had the same issue. I solved it by not passing all the props further down to material components.

You can see what I used to theme the markdown with material ui in the component in this gist: https://gist.github.com/boganegru/a4da0b0da0b1233d30b10063b10efa8a