Embedding a react app within a squarespace site - reactjs

Question

I'm trying to embed a small react app into a squarespace site.
Here's the page: https://www.birdiebreak.com/referral-profile?referralCode=WHUOS
I can get the react app to load just fine but various parts of the site disappear! Specifically the header and any images on the page.
I've tried using the Code widget as well as the Embed widget with both have the same result.
I did try a basic Create React App site to see if the minimal code I built was the problem but got the same issues.
Has anyone managed to do this successfully?

Answer 1

I don't know why exactly, but if I add a script tag into the body referencing my react app <script src="path-to-react/main.buildcode.js" /> parts of the squarespace site just stop loading.
However if instead I add a script loader things work just fine.
<script type="text/javascript">
(function (g, r, head, script) {
head = r.getElementsByTagName("head")[0];
script = r.createElement("script");
script.async = 1;
script.src = "https://birdie-break-develop.azurewebsites.net/static/js/main.d2ee648d.js";
head.appendChild(script);
})(window, document);
</script>

Answer 2

I've had success using a modified version of the Add React to a Website guide in the React docs. Assuming you have access to the source code for your React app, the following steps should work:
Add a Code Block with a single empty div containing a unique ID ('custom-react-root', or whatever you'd like). This is where your React app will render.
Configure your index.js to use this block as the root:
function run() {
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('custom-react-root')
);
}
Run the build command for your build tool to create the minified JS files. (e.g. yarn build)
Wrap the minified JS files in <script> tags, and the CSS file in <style> tags. I wrote a bash script to do this, which includes the following lines:
(
echo "<script>"
cat build/static/js/2.*.chunk.js
echo "</script>"
echo "<script>"
cat build/static/js/main.*.chunk.js
echo "</script>"
echo "<script>"
cat build/static/js/runtime-main.*.js
echo "</script>"
echo "<style>"
cat build/static/css/*.chunk.css
echo "</style>"
) > build/injectable.html
Paste these tags into the Page Header, as described in the SquareSpace docs.