Why is setState not updating state in UseEffect

Question

so i am using an exchange rate api to display the different currency rates. I initially set the state of my exchange rates to null. I then use useEffect to get the data and then add the (key,value) of (currency, currency_value) to an array called fx_rates. I then use setExchangeRates to change it to fx_rates but it does not update.

This is my App.js

import './App.css';
import ExchangeRates from './components/exchangeRates.jsx';


function App() {

  return (
    <div className="App">
    <h1>World of Exchange</h1>
    <ExchangeRates/>
    </div>
  );
}

export default App;

and this is my exchangeRates.jsx

import React, {useEffect, useState} from 'react'
import axios from "axios"

function ExchangeRates() {

  const [exchangeRates, setExchangeRates] = useState([]);
  
  useEffect(() => {
    getExchangeRates()
  }, [])

  const getExchangeRates = async() => {
    const res = await axios.get(` https://v6.exchangerate-api.com/v6/${process.env.REACT_APP_API_KEY}/latest/USD`)
    const data = res.data;
    const converted_rates = data.conversion_rates;
    // envrionmental variable as API Key
    // when the site is first loaded the base currency will be USD
    const fx_rates = []
    for(const [currency, currency_value] of Object.entries(converted_rates)){
      
    fx_rates.push({currency, currency_value})
    }
     // the line above splits the splits the hash into an array each consisting of the key value pairs
     setExchangeRates(fx_rates)
     console.log(exchangeRates)
  }



  return (
    <div>
     

      
     
  
    </div>
 
   
   
    
  );
}

export default ExchangeRates

the console log shows that the state is still null. Also for some reason axios sends an api request two or three times. if someone can help me that would be amazing