Typsetting Problem in better-react-mathjax

Question

I am using better-react-mathjax for equation writing and reading. Basically, I used the MathJax in my equation with a question. When it first loads it does not create a problem.

But when I use to filter using React sate it creates the Typesetting problem and the next app is crashed.

How can I fix the problem?

MathJax

import React from 'react'
import { MathJax, MathJaxContext } from "better-react-mathjax";

const config = {
    loader: { load: ["input/asciimath"] }
};

export const MathJaxOutput = ({ text }) => {
    return <MathJaxContext config={config} version={3}>
        <MathJax dynamic inline>
            {text}
        </MathJax>
    </MathJaxContext>
}

And the error screenshot is

When mark and course name changed automatically loads the related questions.

state = {
        courseName: '',
        selectedTopics: [],
        mark: null,
        questions:[]
   }

componentDidUpdate(prevProps, prevState) {
        if (this.state.courseName !== prevState.courseName || this.state.selectedTopics !== prevState.selectedTopics || this.state.mark !== prevState.mark) {
            if (this.state.courseName) {
                this.props.getCourseQuestions(this.state.courseName, this.state.selectedTopics, this.state.mark);
            }
        }
    }

Output render

{
  this.state.questions.map((question, questionIndex) => (
                    <div className='input-question-field-items' key={questionIndex}>
                            <div className='preview-field-item'>
                                <MathJaxOutput text={<p>{question.questionInput.question}</p>} />
                            </div>
                    </div>
}