Unexpected text node: 'x' in react mathjax preview

Question

<?xml version="1.0" encoding="UTF-8"?>
<math xmlns="http://www.w3.org/1998/Math/MathML">
   <mn>1</mn>
   <mo>=</mo>
   <semantics>
      <mrow>
         <mn>2</mn>
      </mrow>
      <annotation encoding="text/plain">2</annotation>
   </semantics>
   <mspace linebreak="newline" />
   <mn>2</mn>
   <mo>=</mo>
   <semantics>
      <mrow>
         <mn>3</mn>
      </mrow>
      <annotation encoding="text/plain">3</annotation>
   </semantics>
</math>

Unexpected text node: '2', but when I delete all the annotation tags, it works.

I tried it here, https://focused-tesla-b6fe0a.netlify.com/.