Reactjs — всплывающая подсказка MUI HTML не работает с динамическим содержимым HTML

Я использую настроенный HTML MUI Tooltip. Он работает со статическим контентом. Я хочу сделать его динамичным. Он не работает с динамическим html-контентом.

Я пытаюсь следующим образом.

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>
))


const HtmlTooltip = styled(({ className, ...props }) => (
  <Tooltip {...props} classes = {{ popper: className }} />
))(({ theme }) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: '#f5f5f9',
    color: 'rgba(0, 0, 0, 0.87)',
    maxWidth: 220,
    fontSize: theme.typography.pxToRem(12),
    border: '1px solid #dadde9',
  },
}));

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

ОБНОВЛЯТЬ

Он отлично работает, если я предпочитаю статический контент следующим образом:

<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>

Я хочу сделать контент динамичным.

MUI Refr. Так выглядит на MUI здесь

Вот песочница