React + Axios - возврат карты не является функцией?

Я работаю над своим первым API с React. Я могу в консоли регистрировать мое текущее состояние после его загрузки и установки состояния для этого массива. Однако запуск моего компонента с опорой FragrancesArray, которая устанавливается после загрузки данных из this.state.fragrances, возвращается не как функция.

Использование axios async и await.

Понятия не имею, почему? Может кто поможет?

Спасибо.

Мой код:

// Core React
import React, { Component } from 'react';

// Axios
import axios from 'axios';

// Constants
import { FRAGRANCES_URL, BLOGS_URL, MAKE_UP_URL } from 'constants/import';

// Components
import Fragrances from 'components/Fragrances/Fragrances';

class App extends Component {

  state = {
    fragrances: [],
    blogs: [],
    makeup: []
  }

  getCoffee() {
    return new Promise(resolve => {
      setTimeout(() => resolve('☕'), 0); // it takes 1 seconds to make coffee
    });
  }

  async showData() {
    try {
      // Coffee first
      const coffee = await this.getCoffee();
      console.info(coffee); // ☕

      // Axios API's
      const fragranceData = axios(FRAGRANCES_URL);
      const blogData = axios(BLOGS_URL);
      const makeupData = axios(MAKE_UP_URL);

      // await all three promises to come back and destructure the result into their own variables
      await Promise.all([fragranceData, blogData, makeupData])

      .then((data) => {
        this.setState({
          fragrances: data[0],
          blogs: data[1],
          makeup: data[2]
        });

        const { blogs } = this.state;
        console.info(blogs);
      })

    } catch (e) {
      console.error(e); // ?
    }

  }

  componentDidMount() {
    this.showData();
  }

  render() {
    return (
      <Fragrances FragranceArray = {this.state.fragrances} AppURL = {FRAGRANCES_URL} />
    )
  }
}
export default App;