How to use the @shopify/react-intersection-observer.useIntersection function in @shopify/react-intersection-observer

'You’ve changed the defer strategy on an ',
        'component after it has mounted. This is not supported.',
      ].join(' '),
    );
  }

  let intersection: IntersectionObserverEntry | null = null;
  let intersectionRef: React.Ref = null;

  // Normally this would be dangerous but because we are
  // guaranteed to have thrown if the defer option changes
  // we can be confident that a given use of this hook
  // will only ever hit one of these two cases.
  /* eslint-disable react-hooks/rules-of-hooks */
  if (defer === DeferTiming.InViewport) {
    [intersection, intersectionRef] = useIntersection();
  }
  /* eslint-enable react-hooks/rules-of-hooks */

  const loadRemote = React.useCallback(async () => {
    try {
      setResult({status: Status.Loading});
      const importResult = await load(source, getImport, nonce);

      if (mounted.current) {
        setResult({status: Status.Complete, imported: importResult});
      }
    } catch (error) {
      if (mounted.current) {
        setResult({status: Status.Failed, error});
      }
    }