How to use the @shopify/app-bridge/actions.Toast.Action function in @shopify/app-bridge

if (appBridge == null) {
      showToast({id, ...props});
    } else {
      // eslint-disable-next-line no-console
      console.warn(
        'Deprecation: Using `Toast` in an embedded app is deprecated and will be removed in v5.0. Use `Toast` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/toast',
      );

      appBridgeToast.current = AppBridgeToast.create(appBridge, {
        message: content,
        duration,
        isError: error,
      });

      appBridgeToast.current.subscribe(AppBridgeToast.Action.CLEAR, onDismiss);
      appBridgeToast.current.dispatch(AppBridgeToast.Action.SHOW);
    }

    return () => {
      if (appBridge == null) {
        hideToast({id});
      } else if (appBridgeToast.current != null) {
        appBridgeToast.current.unsubscribe();
      }
    };
  }, [appBridge, props]);

if (appBridge == null) {
      showToast({id, ...props});
    } else {
      // eslint-disable-next-line no-console
      console.warn(
        'Deprecation: Using `Toast` in an embedded app is deprecated and will be removed in v5.0. Use `Toast` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/toast',
      );

      appBridgeToast.current = AppBridgeToast.create(appBridge, {
        message: content,
        duration,
        isError: error,
      });

      appBridgeToast.current.subscribe(AppBridgeToast.Action.CLEAR, onDismiss);
      appBridgeToast.current.dispatch(AppBridgeToast.Action.SHOW);
    }

    return () => {
      if (appBridge == null) {
        hideToast({id});
      } else if (appBridgeToast.current != null) {
        appBridgeToast.current.unsubscribe();
      }
    };
  }, [appBridge, props]);