Sending Custom Event with callback to content_script

Question

I am working on a Chrome Extension and I am trying to send a CustomEvent to the content_script from the web page, but I want to attach a function to it.

This works (when I console.log the event in the content_script I can see the detail object as shown below) :

var myEvent = new CustomEvent('myEvent', {
    "detail": {
        action:'test',
        foo:'bar'
    } 
});

But this does not work (when I console.log the event in the content_script, detail is null):

var myEvent = new CustomEvent('myEvent', {
    "detail": {
        action:'test',
        foo:()=>{
            console.log("hi");
        }
    } 
});

I also tried this way :

myEvent.foo = ()=>{console.log("hi")};

But again when I console.log the event those properties do not exist.

I don't think that is important but the event is triggered from a React App like this :

document.dispatchEvent(event);

Can you tell me why, and how to send it properly ?

Thanks