Creating a ref when overriding a component

[ben4d85]

When overriding a component, is there a way to generate a ref?

Context: I have generated a TOC from the h2s in my markdown file. Now I would like to create a feature that scrolls to the corresponding heading in the document when the TOC is clicked. I read ref is the way to go, so now I am trying to add refs to all h2s.

I have tried the below, but ref is not included int he resulting HTML? ("test" is, so I know the rest is working fine)

<Markdown
    children={md}
    options={{
        forceBlock: true,
        overrides: {
            h2: {
                component: Heading,
            }
        },
    }}
/>

export class Heading extends Component {
    render() {
        return (
            <h2 
                id={this.props.id}
                ref={this.props.id}
                test="test"
            >
                {this.props.children}
            </h2>
        );
    };
}

[samupra]

Any updates on this? Same requirement.