Why isn't my script tag displaying a banner under the header?

[radishhorse]

I am trying to display a banner under the header using a script tag. I am using the app created from the Shopify CLI using node. 

I used the script tag API to add the script tag:

    "script_tags": [
        {
            "id": 174240039086,
            "src": "https://60c05abd8442.ngrok.io/script_tag",
            "event": "onload",
            "created_at": "2021-06-28T01:23:17-04:00",
            "updated_at": "2021-06-28T01:23:17-04:00",
            "display_scope": "all",
            "cache": false
        }
    ]

And I added a <div id="script-app"></div> in the theme.

Here is my /pages/script_tag.js file:

import React from 'react';
import ReactDOM from 'react-dom';


class TestScriptTag extends React.Component {
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <p>this is a bar</p>
            </div>
        );
    }
}

 ReactDOM.render(<TestScriptTag />, document.getElementById('script-app'));

export default TestScriptTag;

I am getting the error: document not defined. I think this is due to server side rendering, so I thought I could get around it by doing this:

 if (typeof window !== "undefined") {
   ReactDOM.render(<TestScriptTag />, document.getElementById('script-app'));
}

But still nothing shows up. Can anyone help? I feel like I'm missing something stupid.