Detect if iframe is clicked

iframe.tsx

import React from 'react';

interface IFrameProps {
  url: string;
  onClick?: () => void;
}

const IFrameComponent: React.FC<IFrameProps> = ({ url, onClick }) => {
  const ref = React.useRef<HTMLIFrameElement | null>(null);
  React.useEffect(() => {
    const iframe = ref.current;
    if (onClick && iframe !== null) {
      const windowBlurred = () => {
        let start = 0;
        const iframeSelected: FrameRequestCallback = (time) => {
          if (start === 0) {
            start = time;
          }
          if (time - start >= 1000) {
            return;
          } else if (document.activeElement === iframe) {
            onClick();
            iframe.blur();
          } else {
            window.requestAnimationFrame(iframeSelected);
          }
        };
        window.requestAnimationFrame(iframeSelected);
      };
      window.addEventListener('blur', windowBlurred);
      return () => {
        window.removeEventListener('blur', windowBlurred);
      };
    }
  }, [ref, onClick]);
  return (
    <iframe
      ref={ref}
      src={url}
      frameBorder="0"
      scrolling="no"
    />
  );
};