I have a rich text editor that supports mathematical expression, its working fine expressions can be written and rendered fine in the editor but when we try to render using div it throws many errors in the console and the page becomes blank.
<div className="text-container flex" dangerouslySetInnerHTML={{ __html: value }} />
We use Katex and Mathquil to work with math expressions, HTML content is this
<p>
<span class="ql-formula" data-value="sqrt[3]{}23">
<span contenteditable="false">
<span class="katex">
<span class="katex-mathml">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<semantics>
<mrow>
<mroot>
<mrow></mrow>
<mn>3</mn>
</mroot>
<mn>23</mn>
</mrow>
<annotation encoding="application/x-tex">sqrt[3]{}23</annotation>
</semantics>
</math>
</span>
<span class="katex-html" aria-hidden="true">
<span class="base">
<span class="strut" style="height: 1.04em; vertical-align: -0.2395em;"></span>
<span class="mord sqrt">
<span class="root">
<span class="vlist-t">
<span class="vlist-r">
<span class="vlist" style="height: 0.6588em;">
<span class="" style="top: -2.8366em;">
<span class="pstrut" style="height: 2.5em;"></span>
<span class="sizing reset-size6 size1 mtight">
<span class="mord mtight">
<span class="mord mtight">3</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="vlist-t vlist-t2">
<span class="vlist-r">
<span class="vlist" style="height: 0.8005em;">
<span class="svg-align" style="top: -3em;">
<span class="pstrut" style="height: 3em;">
</span>
<span class="mord" style="padding-left: 0.833em;">
</span></span><span class="" style="top: -2.7605em;"><span class="pstrut" style="height: 3em;"></span><span class="hide-tail" style="min-width: 0.853em; height: 1.08em;"><svg width="400em" height="1.08em" viewBox="0 0 400000 1080" preserveAspectRatio="xMinYMin slice"><path d="M95,702
c-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,-10,-9.5,-14
c0,-2,0.3,-3.3,1,-4c1.3,-2.7,23.83,-20.7,67.5,-54
c44.2,-33.3,65.8,-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c4.7,0,8.7,3.3,12,10
s173,378,173,378c0.7,0,35.3,-71,104,-213c68.7,-142,137.5,-285,206.5,-429
c69,-144,104.5,-217.7,106.5,-221
l0 -0
c5.3,-9.3,12,-14,20,-14
H400000v40H845.2724
s-225.272,467,-225.272,467s-235,486,-235,486c-2.7,4.7,-9,7,-19,7
c-6,0,-10,-1,-12,-3s-194,-422,-194,-422s-65,47,-65,47z
M834 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height: 0.2395em;"><span class=""></span></span></span></span></span><span class="mord">23</span></span></span></span></span></span> </p>In the editor it looks like this but when we try to render this on the view page, its fails.
How can we render this HTML content in react js?