window.postmessage() data is not recieved instantly rather than i have put a setTimeout function to pass the data

Question

I am using window.postmessage() to send the data across domains to a popup but, postmessage is not sending the data instantly i.e. when captured on other domain in constructor of a component the data is not coming. If given a setTimeout i.e. delay of around 1 sec then data is coming. What could be the issue?

Here's the code:

Parent:

var popup = window.open(
                "http://localhost:4300",
                'winname',
          );
    popup.postMessage('response', '*');

Popup-Window:

window.addEventListener('message', (event) => {
console.log(event.data)}

I should be getting data as response but I am getting data as undefined in console.

Also, If i put the code below in Parent:

setTimeout(() => {
              popup.postMessage('response', "http://localhost:4300");
            }, 2000);

I am able to get the data as "response" in console in popup.

I want to get rid of setTimeout and get the data as soon as poosible. Please help.