如何使用API中的数据填充选择下拉列表元素-ReactJS

我对React很陌生。我正在从API提取数据，查看控制台日志时可以看到数据。但是我不知道如何使用map（）创建一个新的数组，然后选项元素就可以使用该数组显示货币代码。

当前，它填充下拉列表，但是选项元素都为空，结果显示为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.log(currenciesFromApi);
        this.setState({
          currencies: currenciesFromApi
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

预期结果：将使用API​​中的货币代码（例如GBP，EUR，USD）填充下拉列表，并使用显示汇率而不是NaN的值填充。

实际结果：下拉列表为空，选择任何一个也将返回Nan。