How to use the @shopify/async.DeferTiming.InViewport function in @shopify/async

[
        '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});
      }

useEffect(() => {
    if (defer == null || defer === DeferTiming.Mount) {
      load();
    } else if (typeof defer === 'function' && defer(props)) {
      load();
    }
  }, [defer, load, props]);

  if (typeof defer === 'function') {
    return null;
  }

  switch (defer) {
    case DeferTiming.Idle:
      return ;
    case DeferTiming.InViewport:
      return (
        
      );
    default:
      return null;
  }
}

renderLoading = defaultRender,
    } = this.props;
    const {resolved, loading} = this.state;

    const effect =
      resolved != null && id != null && manager != null ? (
         manager.markAsUsed(id())}
        />
      ) : null;

    const content = loading ? renderLoading() : render(resolved);

    const intersectionObserver =
      loading && defer === DeferTiming.InViewport ? (
        
      ) : null;

    return (
      <>
        {effect}
        {content}
        {intersectionObserver}
      
    );
  }

React.useEffect(() => {
    if (
      result.status === Status.Initial &&
      defer === DeferTiming.InViewport &&
      intersection &&
      intersection.isIntersecting
    ) {
      loadRemote();
    }
  }, [result, defer, intersection, loadRemote]);

export default function ImportRemote({
  source,
  nonce,
  preconnect,
  getImport,
  onImported,
  defer,
}: Props) {
  const {result, intersectionRef} = useImportRemote(source, {
    defer,
    nonce,
    getImport,
  });

  const intersectionObserver =
    defer === DeferTiming.InViewport && intersectionRef ? (
      <div>} /&gt;
    ) : null;

  React.useEffect(() =&gt; {
    switch (result.status) {
      case Status.Failed:
        onImported(result.error);
        return;
      case Status.Complete:
        onImported(result.imported);
    }
  }, [result, onImported]);

  if (preconnect) {
    const url = new URL(source);
    return (</div>