Any way to include ReactJS components in a HTML string?

Question

I am working with the Adapt Learning Framework, which renders ReactJS components and populates them using dangerouslySetInnerHTML with strings and data read from a .JSON file.

This is good to serve most use-cases, but we want to be able to include custom React components in our strings, and have them be rendered accordingly.

For example:

component1.json

{
    "component": "Accordion",
    "title": "My component 1",
    "body": "<p>Paragraph1</p><p>Paragraph2</p><MyReactComponent />"
}

The framework would take the above object and render the ReactJS <Accordion /> component with the objects for props.

For example, this is how "body" is being rendered:

<div className="accordion__body" dangerouslySetInnerHTML={{ __html: props.body }} />

As expected, Paragraph1 and Paragraph2 are rendered, but not <MyReactComponent />.

Is there a way to create <MyReactComponent /> using a string? And would it be suitable/recommended to do so if I intend to have many (50+) components defined in this way on a single page?

I also suspect the solution would need to run client-side, as the framework does not pre-compile its components (it loads and populates the JSON at runtime).

Many thanks in advance!

P.S. At the moment, the only solution that I think could work would be to to set up a mutationObserver to inject the React component into the HTML after it's rendered into the Accordion component; but I know this would be against Reacts core principles.