I am creating an iframe to display a functional component (ReactJS) in its own silo. The iframe shows up with all the content, but CSS is not applied.

I have used this answer to write some JavaScript that should apply my main stylesheet to the iframe:

    import stylesheet from '../../main.css'    
    
    export default function FunctionalIFrameComponent({ children, title, ...props }) {
          const iframeRef = useRef()
          const mountNode = iframeRef?.current?.contentWindow?.document?.body
        
          useEffect(() => {
              if(iframeRef.current) {
                  console.log(stylesheet)
                  let cssLink = document.createElement("link") 
                  cssLink.href = "file://../../main.css"; 
                  cssLink .rel = "stylesheet"; 
                  cssLink .type = "text/css";
        
                  iframeRef.current.contentWindow.document.body.appendChild(cssLink)
              }
          }, [iframeRef])
        
          return (
            <iframe title={title} {...props} ref={iframeRef}>
              {mountNode && createPortal(children, mountNode)}
            </iframe>
          )
        }

However, no styles are applied.

When I log the contents of the stylesheet variable, only an empty object gets returned (i.e., {}).

How should I load my stylesheet into the iframe?