I am trying to use vanilla javascript to dispatch a custom event. Along with the event, I would like to pass a custom object.

Here is what I have done

document.addEventListener('abcAppended', function (e) {
     console.log(e.el); // write the custom object to the console
});

var wrapper = document.getElementById('abc');
if (wrapper) {
    // do something with wrapper
   
    document.dispatchEvent(new CustomEvent('abcAppended', {
        el: wrapper // I tried to add custom object here
    }));
}

But the above write undefined to the console. How can I correctly pass an object and access it using a listener.