Unable to trigger event listener in script with custom event

Question

I am attempting to trigger an event listener inside a script on my website with a custom event, however, nothing seems to make it happen. It's supposed to tell the canvas to render an audio waveform after the component is mounted.

In my App.js componentDidMount():

let waveform = document.getElementById("audio-spectrum");

// Loads script waveform.js
const script = document.createElement("script");
script.src = '../waveform.js';
script.async = true;
App.appendChild(script);

let newWaveform = new Event("render");
waveform.dispatchEvent(newWaveform);

In waveform.js:

let waveform = document.getElementById('audio-spectrum');

waveform.addEventListener("render", function(event) {
    event.preventDefault();
    console.log("Something should happen");
    renderWaveform();
}, false);

I was wondering if having the same element trigger and catch the response is the source of my problems, but I'm doing the same thing with audio playback and it's working fine.

Thanks in advance.

UPDATE:

The problem was not with the event/event listener, but with appending the script while the event was firing. Here is my promise-based solution:

In my App.js:

renderWave = () => {
    let waveform = document.getElementById('audio-spectrum');
    let renderEvent = new Event('render');
    waveform.dispatchEvent(renderEvent);
}

mountAudioScript = () => {

    let mediaHandler = document.getElementById("media-handler");
    const script = document.createElement("script");

    mediaHandler.appendChild(script);

    script.src = '../waveform.js';

    return new Promise(res => {
        script.onload = res
    })
}

componentDidMount() {

    this.mountAudioScript().then(() => {
        if(this.props.mediaUrl) {
            this.renderWave();
        } else {
            // promptUpload()
        }
    });

Answer 1

Change to let newWaveform = new CustomEvent("render") . See more here https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent