Reactjs - MUI HTML Tooltip is not working with dynamic HTML content

[Hansel]

I am using customized HTML MUI Tooltip. It is working with static content. I want to make it dynamic. It is not working with the dynamic html content.

I am trying the following way.

const ADJUSTMENT_HELP_TEXT = styled(()=>(
    <Typography component="div">
        <em>Adjustments can be added as following.</em>
        <ul><li>You can include previous due amount.</li><li>You can exlude amount.</li><li>You can add Waive-Off etc.</li></ul>
    </Typography>
))

<HtmlTooltip 
    title={<Fragment>{<ADJUSTMENT_HELP_TEXT />}</Fragment>}>
    <HelpTwoToneIcon />
</HtmlTooltip>

UPDATE

It is working fine if I prefer static content as follows:

<HtmlTooltip 
    title={<Fragment>
            <Typography component="div">
                <em>Adjustments can be added as following.</em>
                <ul><li>You can include previous due amount.</li><li>You can exlude amount.</li><li>You can add Waive-Off etc.</li></ul>
            </Typography>
    </Fragment>}>
    <HelpTwoToneIcon />
</HtmlTooltip>

I want to make the content dynamic.
MUI Refr. It looks like this on MUI here

 

[Artificial Temp]

Can you please show how have you customised the html tooltip?