How to get the data from this api using reactjs hook?

import React, { useState, useEffect } from "react"; import "./App.css";

function App() { const [userData, setUserData] = useState({}); const [stockData, setStockData] = useState([]); const [spreadData, setSpreadData] = useState({}); const [currencyData, setCurrencyData] = useState([]);

useEffect(() => { fetch("https://reqres.in/api/users/2") .then((response) => response.json()) .then((data) => setUserData(data.data));

fetch("http://13.212.255.177/api/priceData/technical-test")
  .then((response) => response.text())
  .then((data) => {
    const stockData = JSON.parse(data).map(({ base, Bid, Ask, Pip }) => ({
      base,
      Bid,
      Ask,
      Pip,
    }));
    setStockData(stockData);
  });
const intervalId = setInterval(() => {
  fetch("http://13.212.255.177/api/priceData/technical-test")
    .then((response) => response.array())
    .then((data) => {
      const { Spread } = data;
      setSpreadData({ Spread });
    });
}, 2000);

return () => clearInterval(intervalId);

}, []);

useEffect(() => { fetch("http://13.212.255.177/api/priceData/technical-test") .then((response) => response.json()) .then((data) => { const spreadData = data.map(({ Symbol, Spread }) => ({ Symbol, Spread, })); const sortedData = spreadData.sort((a, b) => b.Spread - a.Spread); const highestSpreadCurrency = sortedData[0].Symbol; const lowestSpreadCurrency = sortedData[sortedData.length - 1].Symbol; const highestSpreadValue = sortedData[0].Spread; const lowestSpreadValue = sortedData[sortedData.length - 1].Spread; console.log( Highest spread currency: ${highestSpreadCurrency}, value: ${highestSpreadValue} ); console.log( Lowest spread currency: ${lowestSpreadCurrency}, value: ${lowestSpreadValue} ); }); }, []);

const highestSpreadCurrency = Object.entries(spreadData).length > 0 ? Object.entries(spreadData)[0][0] : ""; const lowestSpreadCurrency = Object.entries(spreadData).length > 0 ? Object.entries(spreadData)[Object.entries(spreadData).length - 1][0] : "";

return ( <div className="dashboard"> <div className="header"> <div className="section section1"> <div className="section-title">Total Traffic <img src={require("./Total traffic.png")} alt="Traffic Icon" /> <div className="section-value">123,456 <div className="section section2"> <div className="section-title">New Users <img src={require("./New users.png")} alt="New Users Icon" /> <div className="section-value">2,345 <div className="section section3"> <div className="section-title">Sales <img src={require("./Sales.png")} alt="Sales Icon" /> <div className="section-value">924 <div className="section section4"> <div className="section-title">Performance <img src={require("./performance.png")} alt="Performance Icon" /> <div className="section-value">48.65%

  <div className="content">
    <div className="messenger">
      {userData && (
        <>
          <div
            className="avatar"
            style={{ backgroundImage: `url(${userData.avatar})` }}
          ></div>
          <div className="details">
            <div className="name">{`${userData.first_name} ${userData.last_name}`}</div>
            <div className="email">{userData.email}</div>
            <div className="buttons">
              <button className="connect">Connect</button>
              <button className="message">Message</button>
            </div>
          </div>
        </>
      )}
    </div>
    <div className="stock-market">
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Sell</th>
            <th>Buy</th>
            <th>Change</th>
          </tr>
        </thead>
        <tbody>
          {stockData.map((item) => (
            <tr key={item.id}>
              <td>{item.base}</td>
              <td>{item.Ask}</td>
              <td>{item.Bid}</td>
              <td>{item.Pip}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    <div className="spread-table">
      <div className="section-title">Spread Table</div>
      <div className="section-values">
        {Object.entries(spreadData).map(([currency, spread]) => (
          <div className="section" key={currency}>
            <div className="section-title">{currency}</div>
            <div className="section-value">{spread}</div>
          </div>
        ))}
      </div>
      <div className="highest-spread-currency">
        <div className="section-title">Highest Spread Currency</div>
        <div className="section-value">{highestSpreadCurrency}</div>
      </div>
      <div className="lowest-spread-currency">
        <div className="section-title">Lowest Spread Currency</div>
        <div className="section-value">{lowestSpreadCurrency}</div>
      </div>
    </div>
  </div>
</div>

); }

export default App;

The first fetch is working but the 2nd and 3rd fetch is not working