I try to display MathML using Wiris plugin. Loading the script it renders math tags but when you dynamically add new ones, they are not rendered.

Math.js

import { Helmet } from "react-helmet";

function Math(params) {
  const mString =
    `<p><strong>What is the result ?</strong></p><p>` +
    `<math xmlns="http://www.w3.org/1998/Math/MathML"><mroot><mn>27</mn><mn>3</mn></mroot><mo>&nbsp;</mo><mo>+</mo><mo>&nbsp;</mo><mfrac>` +
    `<mn>9</mn><mn>3</mn></mfrac></math></p>`;

  return (
    <div>
      {" "}
      <Helmet>
        <script
          src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image&async=true"
          type="text/javascript"
        />
      </Helmet>
      <div id="htmlParser" dangerouslySetInnerHTML={{ __html: mString }}></div>
    </div>
  );
}

export default Math;

App.js

import { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import Math from "./Math";

function Home() {
  const [counter, setCounter] = useState(3);

  const handleIncrease = () => {
    setCounter(counter + 1);
  };

  return (
    <div>
      <Button
        variant="outlined"
        color="primary"
        onClick={handleIncrease}
        style={{ marginInline: 12 }}
      >
        Add
      </Button>
      {[...Array(counter)].map((el, index) => (
        <Math />
      ))}
    </div>
  );
}

export default Home;

The items which rendered first are displayed properly. But when you add new one, they are not affected.

It doesn't change the result if I add the script as below instead of react-helmet:

useEffect(() => {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image&async=true';
        document.head.appendChild(script);
    return () => {
        document.head.removeChild(script);
    };
}, []);

How could I render them all properly in my react app ?