Iframe not loading resources with the correct base-href

I have a create-react-app deployed to aws cloudfront with an API gateway in front of it (need it to use the API Keys with usage plans), so this app needs to be loaded into an iframe (because its meant to be a widget) and I'm trying this inside another react app thats running on localhost:3000:

<script>
      window.addEventListener("load", (e) => {
        var iframe = document.getElementById("iframe");

        fetch("https://my-app-url.com",
          {
            method: "GET",
            headers: { "X-Api-Key": "an-api-gateway-key-that-works" }
          }
        )
          .then((response) => response.text())
          .then((html) => {
            iframe.srcdoc = html;
          });
      });
</script>
<iframe frameborder="0" id="iframe"></iframe>

It loads every file (css, js, favicon.ico) inside the iframe with status 200 OK but with the wrong path, so for example, instead of loading:

https://my-app-url.com/static/js/2.136189ec.chunk.js (the API Gateway path)

it loads:

http://localhost:3000/static/js/2.136189ec.chunk.js (Loads with the local app path)

How can this be fixed? please help me.

EDIT: Is worth mentioning that if I disable the api gateway key and load the app like this <iframe src="https://my-app-url.com"></iframe>, it works just fine