Opened Google Shopping popup returns closed (although it is still open)

Question

I have built a button that opens a link in a popup and updates that popup when the url prop changes. This is working perfectly fine for all pages but stopped working for Google Shopping in the last days. I tried building a working example with stack snippets, but apparently it is not possible to use window.open from there. In a codesandbox it also did not work.

Here is my component:

import { FC, MouseEvent, useEffect, useRef, useState } from "react";

interface PopupWindowButtonProps {
  url: string;
  openInWindow: boolean;
  label: string;
}

const PopupWindowButton: FC<PopupWindowButtonProps> = ({url, openInWindow, label})=> {
  const [isWindowOpen, setIsWindowOpen] = useState(false);
  const windowRef = useRef<Window | null>(null);
  const onClick = (e: MouseEvent<HTMLAnchorElement>)=>{
    if(!openInWindow){
      // let the browser simply open the link
      return;
    }
    e.preventDefault();
    if(!isWindowOpen){
      // open new window
      
      const popup = window.open(url, label, "popup");
      if(!popup){
        alert("could not open a new window. probably your browser is blocking it.");
        return;
      }
      windowRef.current = popup;
      setIsWindowOpen(true);
    } else {
      // close existing window
      if(windowRef.current){
        windowRef.current.close();
      }
      setIsWindowOpen(false);
    }
  };

  useEffect(()=>{
    if(isWindowOpen){
      // check periodically if the window has been closed by the user

      const timer = setInterval(()=>{
        if(windowRef.current && windowRef.current.closed){
          // this runs pretty much immediately when the url is for google shopping. WHY?
          clearInterval(timer);
          setIsWindowOpen(false);
        }
      }, 1000);

      return ()=>clearInterval(timer);
    }
  }, [url, isWindowOpen]);

  useEffect(()=>{
    if(url != "" && isWindowOpen && windowRef.current && !windowRef.current.closed){
      windowRef.current.location.href = url;
    }
  }, [url, isWindowOpen]);

  
  return (
    <a href={url} target='shop' className={`px-2 py-1 rounded mx-1 ${isWindowOpen ? "bg-yellow-500" : "bg-yellow-300"}`} onClick={onClick}>{label}</a>
  );
};

export default PopupWindowButton;

The behavior is as follows:

• The user clicks the button, a popup is opened and the button gets darker.
• If the user closes the popup manually, the button is light again.
• If the user clicks the dark button, the app closes the window for them.
• if the user navigates to a different article, the url prop to the component changes and the popup url is updated automatically

As I said this is working perfectly for all pages, except when the URL is https://www.google.de/search?tbm=shop&q=${selectedArticle?.EAN}. Here, the button turns light immediately after opening the popup (even though the popup stays open), because windowRef.current.closed returns true somehow. This also breaks the automatic navigation feature.

I have tried increasing the interval time. I also tried to pass noopener and/or noreferrer to the popup, but with either of those I get null back from window.open and can't control the popup.

How is Google Shopping implementing it so another window cannot control the popup? Is there any way around this?