Отрисовка графика для всех целей из Яндекс.Метрики в React

Вот такой вот код:

import React, { Component } from 'react';
import {Line} from 'react-chartjs-2';
import './MetricaGoals.css';
class MetricaGoals extends Component {
  constructor() {
    super();
    this.state = {
      metricaGoals          : {
        metricaGoalsList : []
      },
      metricaGoalsData      : [],
    }
  }
  componentDidMount() {
    const OATH_TOKEN = 'token';
    const PROJECT_ID = '23077159';
    fetch(`https://api-metrika.yandex.ru/management/v1/counter/23077159/goals?oauth_token=${OATH_TOKEN}`)
    .then(response => response.json())
    .then(data => {
      const DATA1 = data.goals
      this.setState({
        metricaGoals : {
          metricaGoalsList: DATA1
        }
      })
    });
  }
  render() {
    const OATH_TOKEN = 'token';
    const PROJECT_ID = '23077159';
    const fetchGoals = function(goalId) {
      fetch(`https://api-metrika.yandex.ru/stat/v1/data/bytime?date1=2018-06-13&date2=2018-07-13&group=day&metrics=ym:s:goal20935690conversionRate,ym:s:goal20935690reaches&id=${PROJECT_ID}&oauth_token=${OATH_TOKEN}`)
      .then(response => response.json())
      .then(data => {
        this.setState({
          metricaGoalsData: data.data[0].metrics
        })
      })
    }
    const getDateArray = function(start, end) {
      var
        arr = new Array(),
        dt = new Date(start);
      while (dt <= end) {
        arr.push(new Date(dt).getFullYear() + ' / ' + (new Date(dt).getMonth()+1) + ' / ' + new Date(dt).getDate());
        dt.setDate(dt.getDate() + 1);
      }
      return arr;
    }
    const startDate = new Date('2018-06-13')
    const endDate = new Date('2018-07-13')
    const visitorsArr = getDateArray(startDate, endDate)
    return (
      <div className="MetricaGoals">
        <h2>Цели:</h2>
        <ul className="goals__list">
          {
            this.state.metricaGoals.metricaGoalsList.map(i => {
              fetchGoals(i.id);
              return (
                <li key={i.id} className="goals__item">
                  <div className="goals__id">{i.id}</div>
                  <div className="goals__name">{i.name}</div>
                  <div className="chart__wrapper">
                    <Line
                      data={(canvas) => {
                        const startDate = new Date('2018-06-13')
                        const endDate = new Date('2018-07-13')
                        const visitorsArr = getDateArray(startDate, endDate)
                        const ctx = canvas.getContext("2d")
                        return {
                          labels: visitorsArr,
                          datasets: [
                            {
                              label   : 'Достижения цели',
                              data    : visitorsArr,
                            }
                          ]
                        }
                      }}
                    />
                    <Line
                      data={(canvas) => {
                        const ctx = canvas.getContext("2d")
                        return {
                          labels: visitorsArr,
                          datasets: [
                            {
                              label   : 'Конверсия, %',
                              data    : visitorsArr,
                            }
                          ]
                        }
                      }}
                    />
                  </div>
                </li>
              )
            }
          )
          }
        </ul>
      </div>
    );
  }
}
export default MetricaGoals;

Если вкратце - создал функцию, которая делает запрос к api и вызывается на каждую итерацию в map с новым id, делает setState с новыми данными, потом по этим данным рисует график.

Это в теории, но на практике setState не происходит и график не рисуется.

Как сделать так, чтобы компонент брал цель, ее данные и отрисовывал график, после чего переходил к следующей цели?