I'm working on a project(React, typescript) where first I want to create a new window by clicking a button, and send a message to the new window.

I can create a new window and send a postmessage but when I always open the new window then I got webpack warning objects and because of that I can't display the message what I sent in a html page.

Here my 2 ts files

ContainerWindow.tsx:

const ContainerWindow: React.FC = () => {

  const [recievedMessage, setRecievedMessage] = useState("");

  var popupWindow: Window | null;

  const sendMessage = () => {
    if (!popupWindow) return;
    popupWindow.postMessage("Hello", "http://localhost:3000");
  };

  useEffect(() => {
    window.addEventListener("message", function (e) {
      if (e.origin !== "http://localhost:3000") return;
      setRecievedMessage(e.data);
    });
  }, []);

  const openWindow = () => {
    popupWindow = window.open(
      "http://localhost:3000/customer-details/",
      "popupWindow",
      "width=500,height=500"
    );
    sendMessage();
  };

  return (
    <div className="App">
      <h1>Container Window</h1>
      <button onClick={openWindow}>Open Window</button>
    </div>
  );
}

export default ContainerWindow;

PopupWindow.tsx

const PopupWindow: React.FC = () => {
  const [recievedMessage, setRecievedMessage] = useState("");

  const sendMessage = () => {
    window.opener.postMessage("Hello back", "http://localhost:3000");
  };

  useEffect(() => {
    window.addEventListener("message", function (e) {
      if (e.origin !== "http://localhost:3000") return;
      if(e.data){
        setRecievedMessage(e.data);
      }
      console.log(e.data);
    });
    
  }, []);

  return (
    <div>
      <p>{recievedMessage}</p>
    </div>
  );
};

export default PopupWindow;

Can somebody help me to understand why is this happening?