Web app running locally but when pushed to Vercel becomes unresponsive

I'm currently hosting a website on Vercel. It has serverless functions, which are used to query an API and pull some data.

When I run the website locally, whether it be just via my browser on backed on Vercel's local development option (https://vercel.com/cli), it runs perfectly. The API resolves instantly, and it loads fine - as it should for literally a single page app.

However, as soon as I push the site to Vercel and attempt to access it, it seems to start using huge resources and just makes my browser become completely unresponsive. I can't figure out why.

The build is done using 'CI=false npm run build' but none of the other settings have been changed - it's a purely vanilla React app.

For reference, here is my back-end serverless function code:

const express = require("express");
const axios = require("axios")

require("dotenv").config();

const app = express();

const apiKey = process.env.APIKEY;

module.exports = async (req, res) => {

    let cryptoData

    await axios.get(`https://rest.coinapi.io/v1/assets?filter_asset_id=BTC,ETH,XLM,XRP,ADA&apikey=${apiKey}`)
        .then((response) => {
            cryptoData = response.data
        })
        .catch((error) => {
            console.log(error)
        })

    res.send(cryptoData)

}

And the core functionality is as follows:

const PriceContainer = () => {

  const [responseArray, setResponseArray] = useState([])

  const [bitcoinPrice, setBitcoinPrice] = useState('')
  const [ethereumPrice, setEthereumPrice] = useState('')
  const [stellarPrice, setStellarPrice] = useState('')
  const [xrpPrice, setXrpPrice] = useState('')
  const [cardanoPrice, setCardanoPrice] = useState('')

  useEffect(() => {
    axios.get(("/api/fetchData"))
      .then((response) => {
        setResponseArray(response.data)
      })
      .then(() => {
        responseArray.map(response => {
          if (response.asset_id === 'BTC') {
            setBitcoinPrice(`$${response.price_usd.toFixed(2)}`)
          } else if (response.asset_id === 'ETH') {
            setEthereumPrice(`$${response.price_usd.toFixed(2)}`)
          } else if (response.asset_id === 'XLM') {
            setStellarPrice(`$${response.price_usd.toFixed(2)}`)
          } else if (response.asset_id === 'XRP') {
            setXrpPrice(`$${response.price_usd.toFixed(2)}`)
          } else if (response.asset_id === 'ADA') {
            setCardanoPrice(`$${response.price_usd.toFixed(2)}`)
          }
        })
      })
      .catch((error) => {
        console.log(error)
      })
  }, [responseArray])

  return (
    <div className="price-container">
      <div className="individual-container">
        <PriceBox image="bitcoin" alt="Bitcoin" name="Bitcoin" price={bitcoinPrice} />
        <PriceBox image="ethereum" alt="Ethereum" name="Ethereum" price={ethereumPrice} />
        <PriceBox image="stellar" alt="Stellar Lumens" name="Stellar Lumens" price={stellarPrice} />
        <PriceBox image="xrp" alt="XRP" name="XRP" price={xrpPrice} />
        <PriceBox image="cardano" alt="Cardano" name="Cardano" price={cardanoPrice} />
      </div>
    </div>
  )
}

Does anyone have any suggestions for what could be causing this? It's a real head scratcher.