How to render a page based on the data obtained on the basis of a request, which is made on the basis of another request. (React)

I have this endpoint to get basic data for my app: https://app.subsocial.network/subid/api/v1/chains/properties

In the response i have an object like this:

{
  "edgeware": {
    "ss58Format": 7,
    "tokenDecimals": [
      18
    ],
    "tokenSymbol": [
      "EDG"
    ],
    "icon": "edgeware-circle.svg",
    "name": "Edgeware"
  },
  "chainx": {
    "icon": "chainx.svg",
    "name": "ChainX"
  },

What I need is to display name and icon for each particular object (for example in this case for the first instance it will be like this by mapping the main object: the name we can get like that: {item.name} and the icons we can get like this: <img src={https://app.subsocial.network/subid/icons/${item.icon}}/> ).

BUT! Near each particular item I also need a status of a request, that was made to a particular url, based on each object. For example for the first object it will be https://app.subsocial.network/subid/api/v1/check/edgeware. This request is returning a boolean value and i just want to display it near the name and icon. For now I have this code, and i cant figure out how to make second request and to display it. Besides, I need to update all the statuses every 5 minutes. I trying this, but I have all true or all false values, despite that API is work correct.

import React, { useState, useEffect } from 'react';
import { ImageContainer, IconImage, ItemWrapper, RedSquare, GreenSquare, ItemName, LoadingWrapper } from './styled-containers';


function App() {
  const [data, setData] = useState([]);
  const [finalData, setFinalData] = useState([]);
  const [loading, setLoading] = useState(true);

  const transformData = (obj, statuses) => {
    const array = [];
    for (let key in obj) {
      array.push({ ...obj[key], statuses: statuses });
    }
    return array
  }

  const fetchData = () => {
    fetch('https://app.subsocial.network/subid/api/v1/chains/properties')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.log(error))
  }

  useEffect(() => {
    fetchData()
  }, []);

  useEffect(() => {
    for (let key in data) {
      fetch(`https://app.subsocial.network/subid/api/v1/check/${key}`)
        .then(response => response.json())
        .then(itemStatus => setFinalData(transformData(data, itemStatus)))
        .catch(error => console.log(error))
        .finally(setLoading(false))
    }
    setInterval(() => {
      fetchData()
    }, 30000)
  }, [data])

  console.log(finalData)
  return (
    <div className="App">
      {loading ? <LoadingWrapper>...loading</LoadingWrapper> : finalData.map((item, index) => {
        return (
          <ItemWrapper key={index}>
            <ImageContainer >
              <IconImage src={`https://app.subsocial.network/subid/icons/${item.icon}`} alt='' />
            </ImageContainer>
            <ItemName>{item.name}</ItemName>
            {finalData.statuses ? <GreenSquare /> : <RedSquare />}
          </ItemWrapper>
        )
      })}
    </div>
  );
}

export default App;