Docusaurus: Creating Headings in javascript file, which also show up in the table of content

Question

I want to export a react component, that contains a heading which is suppose to show up in the table of content aswell.

My first idea was to use the docusaurus Heading component, which sizes the heading correctly and creates a link, but it still doesn't show up in the table of content.

<Heading as="h2" id='my-heading'>My Heading</Heading>

Another approach that I thought of, was creating an mdx element in the javascript file, but I'm honestly not sure how to do that exactly and what I tried didn't work.

const mdxHeading = mdx`
## My heading
`

<MDXProvider components={mdxHeading}>
    {mdxHeading}
</MDXProvider>

This doesn't seem to work when using it inside an react component.