How to use the @shopify/react-hooks.useMountedRef function in @shopify/react-hooks

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

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

  // Normally this would be dangerous but because we are

export function useAsync(
  resolver: Resolver,
  {assets, scripts = assets, styles = assets, immediate = true}: Options = {},
) {
  const [value, setValue] = useState(() =>
    immediate || typeof window !== 'undefined' ? resolver.resolved : null,
  );

  const mounted = useMountedRef();

  const load = useCallback(async (): Promise => {
    if (value != null) {
      return value;
    }

    try {
      const resolved = await resolver.resolve();

      if (mounted.current) {
        // It's important to use the function form of setValue here.
        // Resolved is going to be a function in most cases, since it's
        // a React component. If you do not set it using the function form,
        // React treats the component as the function that returns state,
        // so it sets state with the result of manually calling the component
        // (so, usually JSX).

export function useSubmit(
  onSubmit: SubmitHandler> = noopSubmission,
  fieldBag: T,
) {
  const mounted = useMountedRef();
  const [submitting, setSubmitting] = useState(false);
  const [submitErrors, setSubmitErrors] = useState([] as FormError[]);

  const fieldBagRef = useRef(fieldBag);
  fieldBagRef.current = fieldBag;

  const setErrors = useCallback((errors: FormError[]) => {
    setSubmitErrors(errors);
    propagateErrors(fieldBagRef.current, errors);
  }, []);

  const submit = useCallback(
    async (event?: React.FormEvent) => {
      const fields = fieldBagRef.current;
      if (event && event.preventDefault && !event.defaultPrevented) {
        event.preventDefault();

documentOrAsyncDocument:
    | DocumentNode
    | AsyncDocumentNode,
): DocumentNode | null {
  const [document, setDocument] = useState | null>(() => {
    if (isDocumentNode(documentOrAsyncDocument)) {
      return documentOrAsyncDocument;
    } else {
      return documentOrAsyncDocument.resolver.resolved;
    }
  });

  const mounted = useMountedRef();

  const loadDocument = useCallback(async () => {
    if (!isDocumentNode(documentOrAsyncDocument)) {
      try {
        const resolved = await documentOrAsyncDocument.resolver.resolve();
        if (mounted.current) {
          setDocument(resolved);
        }
      } catch (error) {
        throw Error('error loading GraphQL document');
      }
    }
  }, [documentOrAsyncDocument, mounted]);

  useEffect(() => {
    if (!document) {