How to invoke IIFE function from external file in useEffect?

I was able to run scoper.js function by using script tag <script src="...">. Now I took that scoper.js function out of src and placed them in different file then try to invoke that function in App.js by importing it. But I’m having no luck. I tried window.onload and even setTimeout, but nothing works. My only guess is scoper.js is called immediately by IIFE so needs to be invoked differently if not invoking it by script tag? Please help.(If called successfully, “Hello World” should be in red color.)https://codesandbox.io/s/stylesheet-scoping-b0k9pp?file=/src/App.js

App.js

import React, { useEffect } from "react";
import "./styles.css";
import { scoper } from "./scoper.js";

export default function App() {
  useEffect(() => {
    const script = document.createElement("script");

    script.src =
      "https://cdn.rawgit.com/thomaspark/scoper/5de04619/scoper.min.js";
    script.async = true;
    // document.body.appendChild(script); // this method works
    window.onload = function () {
      scoper(); // this not working
    };

    let style = document.createElement("style");
    style.setAttribute("scoped", "");
    style.innerHTML =
      ".Puma {" +
      "color: purple;" +
      "font-size: 50px;" +
      "text-align: left;" +
      "}";
    let main = document.getElementById("raptors");
    main.appendChild(style);

  }, []);

  return (
    <>
      <div id="lakers" className="Puma">
        <div>Hello World!</div>
      </div>
      <div id="raptors" className="Puma">
        <h1>Raptors win!</h1>
      </div>
    </>
  );
}

scoper.js

function scoperInit() {
  var style = document.createElement("style");
  style.appendChild(document.createTextNode(""));
  document.head.appendChild(style);
  style.sheet.insertRule("body { visibility: hidden; }", 0);
}

function scoper(css, prefix) {
  console.log("css is ", css);
  console.log("prefix is ", prefix);
  var re = new RegExp("([^rn,{}]+)(,(?=[^}]*{)|s*{)", "g");
  css = css.replace(re, function (g0, g1, g2) {
    if (
      g1.match(/^s*(@media|@.*keyframes|to|from|@font-face|1?[0-9]?[0-9])/)
    ) {
      return g1 + g2;
    }

    if (g1.match(/:scope/)) {
      g1 = g1.replace(/([^s]*):scope/, function (h0, h1) {
        if (h1 === "") {
          return "> *";
        } else {
          return "> " + h1;
        }
      });
    }

    g1 = g1.replace(/^(s*)/, "$1" + prefix + " ");

    return g1 + g2;
  });

  return css;
}

function scoperProcess() {
  var styles = document.body.querySelectorAll("style[scoped]");

  if (styles.length === 0) {
    document.getElementsByTagName("body")[0].style.visibility = "visible";
    return;
  }

  var head = document.head || document.getElementsByTagName("head")[0];

  for (var i = 0; i < styles.length; i++) {
    var style = styles[i];
    var css = style.innerHTML;

    if (css && style.parentElement.nodeName !== "BODY") {
      var id = "scoper-" + i;
      var prefix = "#" + id;

      var wrapper = document.createElement("span");
      wrapper.id = id;

      var parent = style.parentNode;
      var grandparent = parent.parentNode;

      grandparent.replaceChild(wrapper, parent);
      wrapper.appendChild(parent);
      style.parentNode.removeChild(style);

      var newstyle = document.createElement("style");
      newstyle.setAttribute("data-scoped-style-for", id);
      var csses = scoper(css, prefix);
      if (newstyle.styleSheet) {
        newstyle.styleSheet.cssText = csses;
      } else {
        newstyle.appendChild(document.createTextNode(csses));
      }

      head.appendChild(newstyle);
    }
  }

  document.getElementsByTagName("body")[0].style.visibility = "visible";
}

function scoperReset() {
  var styles = document.head.querySelectorAll("style[data-scoped-style-for]");
  for (var i = 0; i < styles.length; i++) {
    var style = styles[i];
    var wrapperElementId = style.getAttribute("data-scoped-style-for");
    var wrapperEl = document.getElementById(wrapperElementId);
    if (wrapperEl) {
      // Node may have disappeared, in that case nothing should happen
      var css = style.innerHTML;
      var resettedCss = css.replace("#" + wrapperElementId + " ", "");

      var parent = wrapperEl.parentNode;
      var targetEl = wrapperEl.childNodes[0];

      parent.replaceChild(targetEl, wrapperEl);
      var scopedStyle = document.createElement("style");
      scopedStyle.setAttribute("scoped", "true");
      if (scopedStyle.styleSheet) {
        scopedStyle.styleSheet.cssText = resettedCss;
      } else {
        scopedStyle.appendChild(document.createTextNode(resettedCss));
      }
      targetEl.appendChild(scopedStyle);
    }

    style.parentNode.removeChild(style);
  }
}

function scoperRestart() {
  scoperReset();
  scoperProcess();
}

(function () {
  "use strict";

  if (
    typeof document === "undefined" ||
    "scoped" in document.createElement("style")
  ) {
    return;
  }

  scoperInit();

  if (document.readyState === "complete" || document.readyState === "loaded") {
    scoperProcess();
  } else {
    document.addEventListener("DOMContentLoaded", scoperProcess);
  }
})();

if (typeof exports !== "undefined") {
  exports.scoper = scoper;
}