Cannot read value of undefined when the value is clearly defined

Question

This is quite a weird issue but I will try to explain it to the best of my abilities.

Stack: React Native, Node & express.

What I am trying to do

I am trying to retrieve some data from an endpoint (Coingecko API) and map it to a card component (or a 'block'). This is a wireframe of what the UI looks like . I am trying to retrieve data for the 4 blocks.

Everything inside the server and routes is working fine. I implemented 2 endpoints before this one and I got them to work. I believe the issue here is simply front-end related.

First, I write a hook to store the data I will retrieve inside the 'blockOneData' variable.

const [blockOneData, setBlockOneData]= useState([]);

Next, I await the response:

useEffect(() => {

async function fetchData() {
    await getCoinsDetail() // That this works fine
    await getTopLosers()   // Same with this
    await getBlockOneData()
}
fetchData()

Next, I write the async function that I awaited above and pass the setBlockOneData variable to it:

const getBlockOneData = async () => {
  const iosUrl = 'http://localhost:5000';
  const androidUrl = 'https://api.coingecko.com/api/v3/global/decentralized_finance_defi';

  const response  =  await axios
  .get(androidUrl, {
    headers: {
      "Content-Type": "application/json",
    },
  })
  .then(function (response) {
    console.log('response', response);
    setBlockOneData(response.data)
  })
  .catch(function (error) {
    console.log('error',error);
    // handle error
  });
}

Up to this point, everything is working great. I test it locally using Postman and it's working. (I sent a GET request to this url: http://localhost:5000/coins/blockData and I received a response with the data that I want, as intended). Here is a screenshot of the data

The Problem

When I run the entire app (and not just the server), I get this error: cannot read property 'key/value name' of undefined. See this image

How am I getting an undefined value if I can see the value in postman?

My inefficient solution

I figured out a way to make this work temporarily, but I don't understand how or why. Would love an explanation. So, I commented out all of the objects inside the array and left only one. Like so:

const fourBlockData = [

{
  title: '24h Volume',
  value: 'blockOneData.data.trading_volume_24h', 
  percentage: '-',
  chatImage: Images.pro_chart,
},

// {
//   title: 'DeFi Marketcap',
//   value: blockOneData.data.defi_market_cap,
//   percentage: '-',
//   chatImage: Images.pro_chart,
// },

// {
//   title: 'DeFi Dominance',
//   value: blockOneData.data.defi_dominance,
//   percentage: '-',
//   chatImage: Images.pro_chart,
// },
// {
//   title: 'ETH Marketcap',
//   value: blockOneData.data.eth_market_cap,
//   percentage: '-',
//   chatImage: Images.pro_chart,
// },

];

Then, I replaced the 'blockOneData.data.trading_volume_24h' with a hardcoded value that i came up with. I saved my changes and the error was gone, and I saw my component render with the data I wrote. Fine with that.

I kept the server running, then I changed it back to

  value: 'blockOneData.data.trading_volume_24h', 

And... it just worked. I uncommented the rest of the objects, and it worked. All of them were displayed with and their values were retrieved. BUT, When I stop the server and app then run it again, I get the same error I got initially.

Here is a 1 min video (WeTransfer link) that shows exactly what is happening.

So what is the problem here exactly? And why does it work then stop working like that?

Let me know if you require any additional information (such as my index.js file for the screen/page I am working on).