I am trying to make a web app using react that gives conversion rate between two currency, the problem is that the code that I am writing is making multiple calls to the API resulting in an error 429

import axios from "axios";
import { CurrencyCodesSchema } from "../schema/currency-exchange-schema";

const appId= import.meta.env.VITE_API_KEY

export const getCurrencyCode = async()=>{
    const url = `https://api.currencyapi.com/v3/currencies?apikey=${appId}&currencies=`
    
    const {data: {data}} = await axios(url)

    const arrayCurrency = CurrencyCodesSchema.safeParse(Object.entries(data).map(([code, currency])=>{
      return{
          id : code,
          data : currency
      }
    }))

    if(arrayCurrency.success){
        return arrayCurrency.data
    }
}

import { create } from "zustand";
import { devtools } from "zustand/middleware";
import { getCurrencyCode } from "./services/CurrencyExchangeService";
import { CurrencyCode } from "./types";

type CurrencyExchangeStore={
    currencyCode : CurrencyCode[]
    fetchCurrency: () => Promise<void>
}
export const useCurrencyExchangeStore = create<CurrencyExchangeStore>()(devtools((set)=>({
    currencyCode: [] as CurrencyCode[],
    fetchCurrency: async ()=>{
        const currencyCode = await getCurrencyCode()
        set(()=>({currencyCode})); 
    }
})))

import { useEffect, useState } from "react"
import { useCurrencyExchangeStore } from "../store"
import { CurrencyCodes } from "../types"

const Form = () => {
    const [code, setCode] = useState<CurrencyCodes>()
    const { currencyCode, fetchCurrency } = useCurrencyExchangeStore()
    useEffect(()=>{fetchCurrency()},[])
    useEffect(()=>{setCode(currencyCode)},[currencyCode])
    console.log(code)
    return (
        <div>Form</div>
    )
}

export default Form

I tried using useEffect: useEffect(()=>{fetchCurrency()},[]) so that it would execute the function fetchCurrency only once, but its doing it multiple times