How to solve this Error on typescript with React: Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015)

Question

I just got this error while working on my mini currency converter project using React typesript. I ran a side effect Hook (useEffect) for fetching data from an external source, after manuevering to get the types for the external data, on narrowing to the exact data I want, I keep getting a particular typescript error "Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015)".

enter image description here

Initially before this error i had another but was resolved my solution to that was me inferring to it, the error I previously had was "Typescript error: TS7053 Element implicitly has an 'any' type".

I created an interface of DataProp

`interface DataProp {
  amount: string;
  date: string;
  base: string;
  rates: [
    {
      CAD: number;
      INR: number;
      GBP: number;
      EUR: number;
      USD: number;
    }
  ];
}`

Before Error 'TS7053' (my initial error), my interface was structured like this:

interface DataProp {
  amount: string;
  date: string;
  base: string;
  rates: {USD: string}
}

this is what I recieve form the api. Data from Api

(PS) *"And please is there a way i get the Parsed data types of an external API resonse from the console, please I'd appreciate feedbacks." *

> Back to the Question**

On doing that I expected the code to start working from the solutions i saw online, but it didn't. This are my props; The image contains my code and props

Please how can this be resolved, appreciate responses thanks, and I have been stucked on this for a long time now nothing online seems to be very helpful, thanks