Why not just using innerHTML ? and then use DOMPurify to sanitize your DOM. it finds any potential ways that the user can add data like javascript:alert('hacked'); and makes them as normal HTML.

DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG.

look at the below example:

DOMPurify.sanitize('<img src=x onerror=alert(1)//>'); // becomes <img src="x">

you can use sanitize method then wrapped your html field or in this case image to avoid xss

another example,

const html = `<input type="text" name="text" />`;

ELEMENT.innerHTML = DOMPurify.sanitize(html, { // optional configurations // })

so if a user tries to add for example an image inside the input like

DOMpurify notices onload on image and removes it from submitting