I am using nextjs right now and want to store a react node in state that contains an MathJax from better react mathjax library but it's not re-rendering the component when I update the state:

                {
                    generate: (state: SolvebitState): SolvebitQuestion => {
                        /* ... */
                        return {
                            question:
                              <MathJax>\({a} + {b} = x\)</MathJax>,
                            answer: [a + b],
                            maxTime: 10000
                        }
                    }

    render() {
        return <div className={"flex-col gap-2 flex items-center"}>
            <h2 className={"sm:text-3xl text-2xl text-center"}>
                <MathJaxContext>
                    {this.state.question}
                </MathJaxContext>
            </h2>
        </div>;
    }

Somewhere in the code im updating this.state.question:

        const {question, answer, maxTime} = generate(this.state);
        this.setState({question, correctAnswer: answer.map(a => a.toString()), maxTime});

I tried adding a key to the component with an arbitrary value and it started updating, but I get another error from mathjax