title: Having trouble returning an async/await version of function that includes a .find and .map method
body: <p>I am trying to find out why async/await is not working with a function in my react app. The reason I am trying to do an async function is that I am getting an error on subsequent runs of this function. On initital render, it works find and returns an array. But afterwards, it returns an empty array.</p>
  <pre><code>  useEffect(() =&gt; {
      getSwapPairs()
        .then((res) =&gt; {
          setSwapInfo(res.markets);
          setFromCurrencies(res.markets.map(item =&gt; item.quoteAsset));
  
          if (transactionType === 'BUY') {
            setSelectedCurrencyState({ ...selectedCurrencyState, selectedFromCurrency: localStorage.getItem('fromCurrency') || 'USD', selectedToCurrency: symbol || localStorage.getItem('toCurrency') });
          }
          setTransactionType(localStorage.getItem('transactionType', transactionType) || TRANSACTION_TYPES.BUY);
        });
    }, []);
  
    const getBaseCurrencies = (fromCurrency) =&gt; {
      const filteredQuoteAssetObj = swapInfo.find(async item =&gt; item.quoteAsset === fromCurrency);
      const currencies = filteredQuoteAssetObj.baseAssets.map(async item =&gt; await item.baseAsset);
      return currencies;
    };
  </code></pre>
  <p>The argument being passed in is a state value that is being passed in so that the .find method can find a match. Any help is appreciated. Thanks!</p>