How can I custom renderer tag?

[dribble-njr]

I am trying to implement a blog with chakra-ui and markdown-it.

Now I can parse markdown file to HTML with markdown-it, and I renderer as normal HTML tag like <h1> without any style. But I want to custom style with chakra-ui instead of write CSS code.

How can I costom HTML tag to chakra-ui components. It seems like:

## h2

<Heading as={"h2"}>{...}</Heading>

I am trying to change md.renderer.rules but I doesn't work. So does any other way to impletment it.

Thanks in advance.