The specified value “[object Object]” cannot be parsed, or is out of range and i passing string which is converted into object

`I am trying to make a currency converter application with React but on my console, I get a warning saying “The specified value “[object Object]” cannot be parsed, or is out of range.” and currencyOptions is not showing and not able to see dropdown list i think they are related in some way. I am passing nlabel as string but in InputBox it is showing me as object and not able to show the label
here is the code :App.jsx

    import { useState } from 'react'
    import reactLogo from './assets/react.svg'
    import viteLogo from '/vite.svg'
    import './App.css'
    import InputBox from './components/InputBox';

    import useCurrencyinfo from './hooks/useCurrencyinfo'

    function App() {
      const [amount,setAmount]=useState(0)
      const [from,setFrom]=useState('usd')
      const [to,setTo]=useState('inr')
      const [convertedamount,setConvertedAmount]=useState(0)

    const currencyInfo=useCurrencyinfo(from)
    const options=Object.keys(currencyInfo)
    const str1="from"


    console.log("all option",options)
    const swap=()=>{
      setFrom(to)
      setTo(from)
      setAmount(convertedamount)
      setConvertedAmount(amount)
    }

    const convert=()=>{
      setConvertedAmount(amount*currencyInfo[to])
    }

      return (
        <div className='w-full h-screen flex flex-wrap justify-center items-center bg-cover bg-no-repeat'
        style={{background:'url(https://images.pexels.com/photos/259132/pexels-photo-259132.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1)'}}
        >
        <div className='w-full'>
          <div className='w-full  max-w-md mx-auto border border-gray-60 rounded-lg p-5 background-blur-sm bg-white/30'>
        <form onSubmit={
          (e)=>{
            e.preventDefault()
            convert()
          }
        }></form>
        <div className='w-full  mb-1'>
          <InputBox
          nlabel={str1}
          amount={amount} 
          currencyOptions={options}
          onAmountChange={(amount)=>{setAmount(amount)}}
          onCurrencyChange={(currency)=>{setFrom(currency)}}
          selectedCurrency="usd"
          amountDisabled="false"
          currencyDisabled="false"
          
          
            />
    
        </div>
        </div>
    </div>
        </div>
      )
    }

    export default App

Code for InputBox.jsx

 import React, { useId } from 'react'

                function InputBox(
                    nlabel,
                    amount=0,
                    currencyOptions=[],
                    onAmountChange,
                    onCurrencyChange,     
                    selectedCurrency="usd",
                    amountDisabled=false,
                    currencyDisabled=false,
                    className="",
                ) 
                {
                const id=useId()
                    return (
                    <div className={`bg-white p-3 rounded-lg text-sm flex ${className}`}>
                        <div className='w-1-2'>
                        
                            <label htmlFor={id} className='text-black/40 mb-2'>{nlabel}</label>
                            <input type="number" 
                            id={id}
                            className='outline-none w-full bg-transparent py-3 text-black/90'
                        placeholder='0'
                            disabled={amountDisabled}
                            value={amount}
                            onChange={(e)=>onAmountChange &&onAmountChange(Number(e.target.value))}
                            />
                        </div>
                        <div className='w-1-2 flex flex-wrap justify-end text-right'>
                        <p className="text-black/40 mb-2 w-full">Currency Type</p>
                        <select value={selectedCurrency}
                        className='rounded-lg px-1 py-1 bg-gray-100 cursor-pointer outline-none'
                        onChange={(e)=>{onCurrencyChange && onCurrencyChange(e.target.value)}}
                        disabled={currencyDisabled}
                        >
                {
                    console.log("opt",currencyOptions)
                }

                {
                // currencyOptions.map((currency)=>(

                //     <option key={currency} value={currency}>{currency}</option>))
                }

                        </select>
                        </div>

                    </div>
                )
                }

                export default InputBox

code for useCurrencyInfo.jsx

                import { useEffect,useState } from "react";

                function useCurrencyinfo(currency)
                {
                const [data,setData]=useState({});

                useEffect(()=>{
                          
                 fetch(`https://cdn.jsdelivr.net/npm/@fawazahmed0/currencyapi@latest
                  /v1/currencies/${currency}.json`)
                    .then((res)=>res.json())
                    .then((res)=>setData(res[currency]))
                },[currency])
                console.log(data)
                return data
                }

                export default useCurrencyinfo;

can you please fix this i have tried for 2 hours but not able to figure out why currencyOptions is not printing in InputBox and giving error when i simply use {nlabel} `