I am working on a drop-down feature for language selection which needs to persist on the top right corner of deep-chat in React JS project.
I build the custom component and finding it challenging to add the component it since the html content needs to be a string and the component is quite complex to be written inside backticks.

<DeepChat history={[ { html: renderToString(checkDropDown()), role: "user", }, { html: "<button class='startButtonAction'>Start conversation</button>", role: "ai", }, ]} />

Here a simple HTML is possible, by when checkDropDown returns a complex component which is turned into string via renderToString, it fails to function as expected.

I tried using renderToString( ) to convert JSX to string, but this causes loss in data and events with complex components.
Is there any way to introduce JSX directly into the html type message. Please advise on this.

Added a screenshot for reference, the component outside the deep-chat works fine, but it is not possible to pass it directly to deep-chat due to string type constraint.