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

React.useEffect(() => {
    if (defer === DeferTiming.Idle) {
      if ('requestIdleCallback' in window) {
        idleCallbackHandle.current = (window as WindowWithRequestIdleCallback).requestIdleCallback(
          loadRemote,
        );
      } else {
        loadRemote();
      }
    } else if (defer === DeferTiming.Mount) {
      loadRemote();
    }

    return () => {
      if (
        idleCallbackHandle.current != null &&
        typeof (window as any).cancelIdleCallback === 'function'
      ) {
        (window as any).cancelIdleCallback(idleCallbackHandle.current);
        idleCallbackHandle.current = null;
      }
    };
  }, [defer, loadRemote, intersection, nonce, getImport, source]);

componentDidMount() {
    if (this.state.resolved != null) {
      return;
    }

    const {defer = DeferTiming.Mount} = this.props;

    if (this.props.defer === DeferTiming.Idle) {
      if ('requestIdleCallback' in window) {
        this.idleCallbackHandle = (window as WindowWithRequestIdleCallback).requestIdleCallback(
          this.load,
        );
      } else {
        this.load();
      }
    } else if (defer === DeferTiming.Mount) {
      this.load();
    }
  }

componentDidMount() {
    if (this.state.resolved != null) {
      return;
    }

    const {defer = DeferTiming.Mount} = this.props;

    if (this.props.defer === DeferTiming.Idle) {
      if ('requestIdleCallback' in window) {
        this.idleCallbackHandle = (window as WindowWithRequestIdleCallback).requestIdleCallback(
          this.load,
        );
      } else {
        this.load();
      }
    } else if (defer === DeferTiming.Mount) {
      this.load();
    }
  }

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

export function useImportRemote(
  source: string,
  options: Options,
): {
  result: Result;
  intersectionRef: React.Ref;
} {
  const {defer = DeferTiming.Mount, nonce = '', getImport} = options;
  const [result, setResult] = React.useState>({
    status: Status.Initial,
  });
  const idleCallbackHandle = React.useRef(
    null,
  );
  const mounted = useMountedRef();

  const deferOption = React.useRef(defer);

  if (deferOption.current !== defer) {
    throw new Error(
      [
        'You’ve changed the defer strategy on an ',
        'component after it has mounted. This is not supported.',
      ].join(' '),