I want to render markdown text to the page through react-markdown. I find that there is nothing wrong with the rendered tags, but some tags have no effect. For example, the h1 and markdown h3 tags do not have the effect of being thicker and bigger. For example, this tag of the HGI does not have multiple layers of nesting.

import React from "react";
import ReactMarkdown from "react-markdown/with-html";
// import marked from "marked";
// import hljs from "highlight.js";

class Test extends React.Component{
  // componentDidUpdate(){
    // console.log("==========================id:",this.props.match.params.docId);
    // console.log("==========================id:",this.props.match.params.dirId);
  // }

  render(){
    const markdown = "-sharp-sharp 222\n" +
      "[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n" +
      "> Mditor  markdown ... \n" +
       "****\n" +
      "**`\n" +
      "******\n" +
      "~~~~ \n"+
      "> aaaaaaaaa\n" +
      ">> bbbbbbbbb\n" +
      ">>> cccccccccc\n"+
      "***\n" +
      "*****";

    return (
      <div>
        <ReactMarkdown source={markdown} />
      </div>
    );
  }
}

export default Test;

effect: