Rendering to string results in empty span

[cfranc0]

Describe the bug
When trying to user the renderToString function available in react-dom/server, the resulting HTML output does not contain the equation.

To Reproduce

import React from 'react';
import { renderToString } from 'react-dom/server';

import BlockMath from '@matejmazur/react-katex';

// KaTeX support
import 'katex/dist/katex.min.css'

function TeXter() {
  const tex = renderToString(<BlockMath math="f(x)=\lim_{x\to\infin}\int_a^b e^x" />);

  return (
    <div className="content" dangerouslySetInnerHTML={{__html: tex}}>

    </div>
  );
}
//...

Expected behavior
To return the complete HTML rendering of a given TeX equation.

Screenshots
This is the resulting HTML

• OS: Windows 10 Pro, 1909
• Browser: Firefox
• Version: 85.0

Additional context
The react-katex package appears to be working just fine in this context

To get to this stage I just changed the import line to import {BlockMath} from 'react-katex';

[MatejBransky]

This is caused by empty inital state. I'm thinking how to render HTML once on client side because if I render math immediately in useState then I immediately replace this value with the same one in useEffect.

This looks related: https://medium.com/swlh/how-to-use-useeffect-on-server-side-654932c51b13