I am developing a UI where one can compare an image of a mathematical formula with a rendered version of the LaTeX code that was generated from that image via a DL model. For this, I want to place the two elements (sourceImage and rendered code) one below the other. Now, to simplify the comparison, it would be beneficial to have the two elements in the same size. For rendering the latex code I use the package better-react-mathjax. With this package, I unfortunately only have the option to set the font size, not the width of the resulting rendered component. Hence, I am wondering whether I can set the width of the image element based on the width of the rendered code somehow. I tried to accomplish that with refs, these cannot be used on the MathJax component however.
<Grid container>
<Grid item>
<fieldset>
<legend>Original formula image</legend>
<Box>
<img
width={imageWidth}
src={sourceImage}
alt="Input image"
/>
</Box>
</fieldset>
</Grid>
<Grid item>
<fieldset>
<legend>Dynamically rendered (corrected) formula</legend>
<Box>
<MathJax className={classes.mathjaxElement} dynamic={true}>{'$$' + texSource + '$$'}</MathJax>
</Box>
</fieldset>
</Grid>
</Grid>