How do you implement an external script?

Hello! I've been given a script like the one below. If added to a page, it only loads after the page is refreshed.

Is there another way to go about this?

<!-- script.details JavaScript -->
<div aria-live="polite"><script id="ExampleFeed" async src="https://feed/js/v12/EmbeddedFeed.js" data-JobsBoardID="12345" crossorigin="anonymous" integrity="sha384-Ehesge98ddaugfiwfdjwr398r"></script></div>
<!-- End script.details JavaScript -->

I've done something similar before like the example below but this time there is an error Uncaught TypeError: can't access property "parentNode", elSnippet is null

import React, { useEffect } from 'react'

export default function Example() {

useEffect(() => {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://feed/js/v12/EmbeddedFeed.js';

    document.getElementsByTagName('head')[0].appendChild(script);
}, []);

return (
    <div id="embeddable-feed" data-lang="en"></div>
)
}