I dynamically create mdb.Select objects, everything works, but a js error is thrown in the console whenever I change the value (=select an option). This happens regardless of the fact that I install an onchange handler or not

Expected behavior No js errors in the console

Actual behavior obscure js error in the console

The code below is rather simple : I setup the DOM elements needed to create a mdb.Select with a number of parameters, In the bottom part I am installing an onChange handler with some debug logging which shows the handler completes successfully and AFTER an error is thrown in the console.

Resources (screenshots, code snippets etc.)

function _mdbSelect(container, id, formContainerId, label, isMandatory, values, onChange, classes) {
classes = classes || "mdmField";
var mdmField = $("<select/>", { class: "select "+classes, "data-mdb-container":"#"+formContainerId, id: "fld_" + id , "data-mdb-filter" : true})
.appendTo(container),
options = { filter: true , displayedLabels : 9, formWhite : true};

$("<label/>", { class: "form-label select-label", text: label }).appendTo(container);
if (isMandatory)
    $("<option/>", { value: "", text: "--- Please Select a Value ---" }).appendTo(mdmField);
else {
    options.clearButton = true;
    $("<option/>", { value: "", text: "--- N.A. ---" }).appendTo(mdmField);
}
if (Array.isArray(values))
    values.forEach(cval => {
        $("<option/>", { value: cval.id, text: cval.description }).appendTo(mdmField);
    });
else 
    Object.keys(values).forEach(cval => {
        $("<option/>", { value: cval, text: values[cval].description }).appendTo(mdmField);
    });
if (mdmField.length == 1) {
    new window.mdb.Select(mdmField[0], options);
    if (onChange) {
        mdmField[0].addEventListener("valueChange.mdb.select", (ev) => {
            console.log("onChange");
            onChange(ev.target);              
            console.log("validated");
        });
}
}
return mdmField;

}