javascript – JSX-Parser does not rerender MathJax on state update

Every state update, all DOM and JSX elements are rerendered except for the MathJax elements in the JSX Parser. The MathJax elements outside the JSX Parser component still rerenders with every state update. The state update happens when the radio buttons are pressed. I have verified state change using React Developer Tools.

*Edit: Even when the tex became a state variable, the same issues persist.

import { useState } from "react";
import MathJax from "react-mathjax";
import "./App.css";
import equations from "./equations/equations";
import JsxParser from "react-jsx-parser";

function App() {
    const { lhospital } = equations;
    const sample = {
        problem: `\\lim_{x\\rightarrow 1}\\frac{x^2-1}{x^2+3x-4}`,
        choices: [`1/5`, `2/5`, `3/5`, `4/5`],
        answer: `1/5`,
        solution: `Using <strong>L'Hospital's Rule </strong> {${lhospital}}
                  </br>$\\lim_{x\\rightarrow 1}\\frac{x^2-1}{x^2+3x-4}=\\lim_{x\\rightarrow 1}\\frac{2x}{2x+3}
                  =\\lim_{x\\rightarrow 1}\\frac{2(1)}{2(1)+3}=\\frac{2}{5}$`,
    };

    const [choice, setChoice] = useState(0);
    // console.log(lhospital);

    const changeChoiceHandler = (event) => {
        setChoice(event.target.value);
    };
    function submitHandler(event) {
        event.preventDefault();
        console.log("submit");
    }

    const tex = `<p>Differentiate </p><MathJax.Provider><MathJax.Node formula={problem} /></MathJax.Provider>`;

    return (
        <MathJax.Provider>
            <JsxParser
                bindings={{
                    ...sample,
                }}
                components={{ MathJax }}
                jsx={tex}
            />

            <form onSubmit={submitHandler}>
                <label>
                    <input
                        type="radio"
                        value={sample.choices[0]}
                        onChange={changeChoiceHandler}
                        checked={choice === sample.choices[0]}
                    />
                    {sample.choices[0]}
                </label>
                <label>
                    <input
                        type="radio"
                        value={sample.choices[1]}
                        onChange={changeChoiceHandler}
                        checked={choice === sample.choices[1]}
                    />
                    {sample.choices[1]}
                </label>
                <label>
                    <input
                        type="radio"
                        value={sample.choices[2]}
                        onChange={changeChoiceHandler}
                        checked={choice === sample.choices[2]}
                    />
                    {sample.choices[2]}
                </label>
                <label>
                    <input
                        type="radio"
                        value={sample.choices[3]}
                        onChange={changeChoiceHandler}
                        checked={choice === sample.choices[3]}
                    />
                    {sample.choices[3]}
                </label>
                <input type="submit" value="submit" />
            </form>
            <MathJax.Node formula={`y=x`} />
        </MathJax.Provider>
    );
}

export default App;