I'm only getting this error in production

Does anyone know why? I'm trying to put a component inside an iframe

NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

import React, { useRef, useState } from "react";
import { createPortal } from "react-dom";
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import { styled } from "@mui/material";

const PreviewIframe = styled("iframe")(() => ({
  border: "none",
  height: "100%",
  width: "100%",
}));
export const IFrame = ({
  children,
  ...props
}: {
  children: React.ReactNode;
  style?: React.CSSProperties;
}) => {
  const ref = useRef<HTMLIFrameElement>(null);
  const mountNode = ref?.current?.contentWindow?.document?.body;

  const cache = createCache({
    key: "css",
    container: ref?.current?.contentWindow?.document?.head,
    prepend: true,
  });
  return (
    <PreviewIframe ref={ref} {...props}>
      {mountNode &&
        createPortal(
          <CacheProvider value={cache}>{children}</CacheProvider>,
          mountNode
        )}
    </PreviewIframe>
  );
};