Hi I am in learning phase of React JS and I am creating a Sample Web Application which is using a External JS API for my Newsletter SignUp. I added the External JS API through CustomHook, while executing the External JS Code is not Working. When I went through the External JS code I found few click functions are written under DOMContentLoaded and Window Load event listeners. Those Click functions are not working. I can't paste the entire external.js Code here but I will paste section of it.

My React JS Code

import React, { useEffect } from 'react'
import styles from './MailingList.module.css';
import UseExternalScript from '../../customHook/UseExternalScript/UseExternalScript';

const MailingList = ({ mlistValues }) => {
    UseExternalScript(['.js', '.js'])
    return (
        <>
            <div className="ml-wrapper firstMlistForm">
                <div className="mlform">
                    <form className="mlistFormOne twostep">
                        <div className="email fieldWrap">
                            <input data-type="email" data-error-text="Please enter a valid email address" required="" className="email" placeholder="Email" name="email" />
                        </div>
                        <div className="list-values">
                        </div>
                        <div className="submit">
                            <input type="submit" className="submit mlistSubmit" value="Submit" />
                        </div>
                    </form>
                    <div className="terms">
                        <a href="#" className="terms">terms</a>
                        <p className={`terms-message fadeOut`}>T&C</p>
                    </div>
                </div>
            </div>
        </>
    )
}

export default MailingList

MyCustomHook Script UseExternalScript.js:

import { useEffect } from 'react'

const UseExternalScript = (srcArray) => {

  useEffect(() => {
    const scritpTags = srcArray.map((src) => {
      const script = document.createElement('script');
      script.src = src;
      script.async = true;
      script.onload = () => {
        console.log(Script loaded: ${src});
      };
      document.body.appendChild(script);
      return script;
    });

    return () => {
      scritpTags.forEach((script) => {
        document.body.removeChild(script);
      });
    }

  }, [srcArray])
}

export default UseExternalScript

Some part of External JS external.js

/****/

document.addEventListener('DOMContentLoaded', function() {
const countrySelectList = [...document.querySelectorAll(countrySelector)];
        countrySelectList.forEach(select => {
            /****/
        });

        [...document.querySelectorAll('label[for=country], label[for=Country]')].forEach((c) => {
            c.innerHTML = 'country/region';
        });
    /*****/

});
/*****/
window.addEventListener('load', function(event) {

        [...document.querySelectorAll('.ml-wrapper a.terms')].forEach((terms) => {
            terms.addEventListener('click', function(event) {
                /***/
            }, false);
        });

        [...document.querySelectorAll(formSubmitSelector)].forEach((submit_button) => {

            submit_button.addEventListener('click', function(event) {

                event.preventDefault();
    /***/

            }, false);
        });

    });

Help me in figuring out the solution. When I click on the Submit its not doing anything. To make it as a whole, the click and other Scripts within "DOMContentLoaded" and Window "Load" function as mentioned above in the external.js is not being executed Please note that I can't edit the external.js Code.