Two way communication in Window.open()

Question

requirement: Fo authentication purposes, need to pass data from the parent to the new window.open() instance. After the authentication is finished, need to pass data from the child component to the parent. The current approach looks like this:

The main window: (route: /popup-window);

import React, { useEffect } from 'react';

const MainRoute = props => {

  let windowObjectReference = null;

  const receiveMessage = event => {
    const { data } = event;
    console.log(data);
  };

  const handleOnClick = () => {
    window.removeEventListener('message', receiveMessage);
    const url = '/popup';
    const strWindowFeatures =
      'toolbar=no, menubar=no, width=600, height=700, top=100, left=100';
    windowObjectReference = window.open(url, '_blank', strWindowFeatures);
    windowObjectReference.focus();
    window.addEventListener('message', event => receiveMessage(event), false);
    windowObjectReference.postMessage("hi", "*")
  };
  return (
    <div>
      <button onClick={handleOnClick}>Click me</button>
    </div>
  );
};

export default MainRoute;

Then there is the popup window component which opens on route: /popup.

import React, { useEffect, useState } from 'react';

const PopupRoute = props => {
  
  useEffect(() => {
    if(window.opener){
      window.opener.postMessage("ready", "*");
    }  
  }, [])

  window.addEventListener("message",(e)=>{
      console.log(e);
  });
  return (
    <div>
        <h1>hie ish</h1>
    </div>
  );
};


export default PopupRoute;

The postMessage from the child to the parent passes data to the parent. I want the communication to be two way. Already referred these threads:

1. postMessage() to child window is failing to post
2. Two way communication
3. List item