How to render html template with variables inside from in react?

Question

i am fetching html template from server.That template also have object data inside. I want to show that template in react component. I manage to show all the html elements with html-react-parser plugin, but my variables renders like string {data.title}.

const Template = ({templateData}) => {

    const [data, setData] = useState({
        title: 'Some title',
        description: 'Some description'                    
    })

    return(
        <Fragment>
            {HtmlParser(templateData)}
        </Fragment>
    )
};

Compiles to:

<div>
    <div class="title">{data.title}</div>
    <div class="description">{data.description}</div>
</div>

Wanted result:

<div>
    <div class="title">'Some title'</div>
    <div class="description">'Some description'</div>
</div>

EDIT: found solution but it doesn't look like a good one :) I replaced strings with variable.

   HtmlParser(templateData
                 .replace(/{data.title}/g, data.title)
                 .replace(/{data.description}/g, data.description))