How to prevent change of case of user-defined components in ReactJS while using react-html-parser?

Question

I am trying to convert below string rawJSX to JSX using react-html-parser.

import ReactHtmlParser from "react-html-parser";

function StrToJSX() {
    let rawJSX = `<h1> Hello World! </h1>
    <MyParagraph> I am a programmer. </MyParagraph>`;

    return ReactHtmlParser(rawJSX);
}

react-html-parser converts all the tags and components to lowercase i.e. it is converting MyParagraph component to lowercase as myparagraph.

But I don't want change in case in the components defined by me i.e. I want that after conversion from a string to JSX, MyParagraph should be MyParagraph, it shouldn't convert to myparagraph.

Why I don't want change of case: According to official documentation of ReactJS, user-defined components must be capitalized. If they are not capitalized, they will be treated as HTML tags.