I have an iframe element inside my component and I need to somehow detect when the URL of that iframe changes. What I have tried so far:

1. Added onLoad callback, but this does not trigger every time I redirect in the iframe
2. Used React.useCallback but also does not work as I wanted to
3. Create timeout and get the URL from the iframe every x seconds

Minimalistic code example below

export const XComponent = (props: XComponentProps) => {
  
  const ref = React.useRef<any>();

  1.
  const onLoad = () => {
    const url = ref.current.contentWindow.location.href;
    // do stg with url
  }

  2.
  const getRef = React.useCallback((node: any) => {
    // store node into state, this was not triggered properly either
  }, []);

  3.
  React.useEffect(() => {
    const interval = setInterval(() => {
      const url = ref.current.contentWindow.location.href;
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className={ styles.albertStoremanTab }>
      <div className={ styles.container }>
        <iframe id={"iframe-my-id"} onLoad={onLoad}  src={props.defaultUrl} ref={ref}></iframe>
      </div>
    </div>
  );
};