Как заполнить выбранные элементы раскрывающегося списка данными из API - ReactJS

Я довольно новичок в React. Я получаю данные из API и вижу данные, когда проверяю журнал консоли. Однако я не могу понять, как я могу использовать map() для создания нового массива, который элементы option могут затем использовать для отображения кодов валюты.

В настоящее время он заполняет раскрывающийся список, но все элементы параметров пусты, а результаты отображаются как NaN.

Ниже приведен пример моего кода, в котором я извлекаю данные.

state = {
    currencies: [],
    base: "USD", //default value
    amount: "",
    convertTo: "EUR",
    result: ""
  };

componentDidMount() {
    fetch("https://api.exchangeratesapi.io/latest")
      .then(response => {
        return response.json();
      })
      .then(data => {
        let currenciesFromApi = Object.keys(data.rates);
        console.info(currenciesFromApi);
        this.setState({
          currencies: currenciesFromApi
        });
      })
      .catch(error => {
        console.info(error);
      });
  }

Ожидаемые результаты: раскрывающийся список будет заполнен кодами валют из API (например, GBP, EUR, USD) и значениями для отображения курсов, а не NaN.

Фактические результаты: выпадающие списки пусты, и выбор любого из них также возвращает Нэн.