hi Kristian - welcome to the forum!
This question is not React specific, but I’ll try. It looks like you are taking the main-content (is this a parent div?) and canvas separately and switching from % to px… Additionally, your setState will trigger on the next “React” render, while you are triggering the Babylon Engine to resize (based on the size when the event triggers). I think those will be out of sync. If you are triggering a canvas resize outside of the window resize event then I would suggest connecting to a ResizeObserver on the canvas element itself and calling engine.resize(). You can copy the code from here:
babylonjs-hook/babylonjs-hook.tsx at master · brianzinn/babylonjs-hook (github.com)
I would also try to switch away from getElementsByTagName in case you ever have multiple canvases - you get get it directly from your useRef with reactCanvas.current, which is an HTMLCanvasElement.
I don’t see how your are using innerHeight could expect to maintain aspect ratio - you may have luck as well with FOV. If you are changing your canvas style like that then it will change the canvas aspect ratio - your width and height from different DOM elements. You may find this property useful:
Camera | Babylon.js Documentation (babylonjs.com)
You generally have better luck on the forum, if you can reproduce in the playground - it’s not 100% clear to me what the exact issue is. 