ReactJS - External JS Function “is not a function”

Orignal Link

I'm trying to call an external JS function which my 3rd party required me to include, in order to use their API, but doesn't work as it supposed to.

From what I've read, I am supposed to use, for example, window.extFn() after including the external JS in my index.html which contains the extFn() like so

...and supposed to use it like how it was answered here: Call external Javascript function from react components regardless of whether the said function is inside a file or simply defined on index.html section. This had worked on the JS file I created for testing this.

//File: test.js
function test() {
    return "Hello";
}

...imported the JS file with script tag like usual, and using console.log(window.test()) in my React Component's render() returned Hello.

I tried moving the import to HTML head from body and vice-versa but the error I'm still getting is:

TypeError: window.extFn is not a function
QuickCheckout.render

    ....
      22 |    }
      23 | 
      24 |    render() {
    > 25 |        window.extFn({
      26 |            
    View compiled
    ▶ 20 stack frames were collapsed.

And when I look into my browser console, for some reason I have (which seems to be the key problem)

Uncaught SyntaxError: Unexpected token <                                     external.js:1

my test.js file above, which had worked in my experiment, produces the Unexpected token < error as well in my console...

imported the JS from local source :

<script type="text/javascript"language="javascript"src="../src/external.js"></script>

this is the sample of external.js

function Initialize() {
    try {

        if (abc !== null) {

        }

        /*  if
         provide the call backs */
        abcd = new DEGD(
            a,
            b,
            c,
            d
        displayProgress('Initializing web socket...');
    } catch (e) {

        alert("Initialization Failed" + e);
    }
}