How to use Renderers in latest react-markdown version?

[himat]

I wanted to show a TOC from my markdown headers
So I found this old answer
remarkjs/react-markdown#404 (comment)

But I can't use the code there since it seems like the markdown react component's API has changed, and I can't pass in a custom renderer anymore.

So what is the way that we are supposed to do this now?

Copied code from the link for reference

import React from 'react';

const flatten = (text: string, child) => {
  return typeof child === 'string'
    ? text + child
    : React.Children.toArray(child.props.children).reduce(flatten, text);
};

/**
 * HeadingRenderer is a custom renderer
 * It parses the heading and attaches an id to it to be used as an anchor
 */
const HeadingRenderer = props => {
  const children = React.Children.toArray(props.children);
  const text = children.reduce(flatten, '');
  const slug = text.toLowerCase().replace(/\W/g, '-');
  return React.createElement('h' + props.level, { id: slug }, props.children);
};

export default HeadingRenderer;

<ReactMarkdown
  source={markdown}
  escapeHtml={false}
  renderers={{ heading: HeadingRenderer}
/>

Is the new components parameter to <ReactMarkdown> equivalent?

[ChristianMurphy]

Welcome @himat!
Sorry you ran into a spot of trouble.

To answer your implied question of: "how can I support a table of contents?"
Use plugins instead of components: https://github.com/remarkjs/remark-toc with https://github.com/rehypejs/rehype-slug or https://github.com/rehypejs/rehype-autolink-headings
Using components or renderers will make your problem more complex than it needs to be.

To answer your direct question "How to use Renderers in latest react-markdown version?"
You migrate, this is explained at length in the changelog https://github.com/remarkjs/react-markdown/blob/main/changelog.md#change-renderers-to-components