React iframe cross origin error despite being in same origin

I have an IFrame in React which makes use of the srcDoc property to display the string HTML contents which is an email body (the ref being because this is null when the function is called):

const ref = useRef();
function onIframeLoad() {
    ref.current.height = ref.current.contentWindow.document.body.scrollHeight + "px";
}
<iframe onLoad={onIframeLoad} ref={ref} style={{width: "100%"}} sandbox="" srcDoc={email.body} />

I am trying to make IFrame become the height of the contents of the IFrame, otherwise it is very short with a scrollbar, hence the onIframeLoad function. But for some reason the browser thinks I am trying to do a cross-origin access despite the frame and body being in the same origin:

Any ideas?