How to use the react-async-hook.useAsync function in react-async-hook

function useAsyncShowError(
  asyncFunction: ((...args: Args) => Promise) | (() => Promise),
  params: Args,
  showErrorFunction: typeof showError
): UseAsyncReturn {
  const asyncResult = useAsync(asyncFunction, params)

  useEffect(
    () => {
      // Generic error banner
      if (asyncResult.error) {
        showErrorFunction(ErrorMessages.CALCULATE_FEE_FAILED)
      }
    },
    [asyncResult.error]
  )

  return asyncResult
}

const ImageFlag = memo(({ countryCode, flagSize }: FlagType) => {
  const { getImageFlagAsync } = useContext()
  const asyncResult = useAsync(getImageFlagAsync, [countryCode])
  if (asyncResult.loading) {
    return 
  }
  return (
    <img style="{[">
  )
})

const StarwarsHeroLoaderBasic = ({ id }: { id: string }) => {
  const asyncHero = useAsync(fetchStarwarsHero, [id]);
  return ;
};

const LightningDetails: React.FC = ({ node }) => {
  const { l } = usePrefixedTranslation('cmps.designer.lightning.LightningNodeDetails');
  const [activeTab, setActiveTab] = useState('info');
  const { getInfo, getBalances } = useStoreActions(s => s.lightning);

  const getInfoAsync = useAsync(
    async (node: LightningNode) => {
      if (node.status === Status.Started) {
        await getInfo(node);
        await getBalances(node);
      }
    },
    [node],
  );

  let extra: ReactNode | undefined;
  const { nodes } = useStoreState(s => s.lightning);
  const nodeState = nodes[node.name];
  if (node.status === Status.Started && nodeState) {
    if (nodeState.balances) {
      const { confirmed } = nodeState.balances;
      extra = <strong>{abbreviate(confirmed)} sats</strong>;

const StarwarsHeroLoaderDebounced = ({ id }: { id: string }) => {
  const debouncedFetchStarwarsHero = useConstant(() =>
    AwesomeDebouncePromise(fetchStarwarsHero, 1000)
  );
  const asyncHero = useAsync(debouncedFetchStarwarsHero, [id]);
  return ;
};

const BitcoindDetails: React.FC<{ node: BitcoinNode }> = ({ node }) => {
  const { l } = usePrefixedTranslation('cmps.designer.bitcoind.BitcoinDetails');
  const [activeTab, setActiveTab] = useState('info');
  const { getInfo } = useStoreActions(s => s.bitcoind);
  const { nodes } = useStoreState(s => s.bitcoind);
  const getInfoAsync = useAsync(
    async (node: BitcoinNode) => {
      if (node.status === Status.Started) {
        await getInfo(node);
      }
    },
    [node],
  );

  let extra: ReactNode | undefined;
  const nodeState = nodes[node.name];
  if (node.status === Status.Started && nodeState && nodeState.walletInfo) {
    extra = <strong>{nodeState.walletInfo.balance} BTC</strong>;
  }

  const tabHeaders = [
    { key: 'info', tab: l('info') },

const EmojiFlag = memo(({ countryCode, flagSize }: FlagType) => {
  const { getEmojiFlagAsync } = useContext()
  const asyncResult = useAsync(getEmojiFlagAsync, [countryCode])

  if (asyncResult.loading) {
    return 
  }
  return (
    
  )
})