Как передать массив в React другому классу для отображения графика?

Question

Я выбираю таблицу из DynamoDB и заполняю массив. Я использую метод componentDidMount() для чтения информации из AWS-APIGATEWAY и помещаю значения в массив. Затем я показываю значение массива в HTML-список, и он работает хорошо.

Проблема в том, что я пытаюсь передать массив другому классу (файлу) для построения некоторого графика. Когда я передаю массив с помощью реквизита, он выглядит пустым.

Я пытаюсь вызвать выборку на разных шагах, но я все равно получил

Это файл app.js, где я делаю выборку и вызываю другой класс:

import React, { Component } from 'react';
import ChartPie from './components/ChartPie';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tasks: []
        };
    }
    componentDidMount() {
        fetch('https://llzgbat7hi.execute-api.us-east- 
           2.amazonaws.com/api/ForeseFiles')
        .then(res => res.json())
        .then(json => {
            const tasks = json.map(item => item.CountEmails)
            this.setState({ tasks: tasks })
        });
    }

    render() {   
        const { tasks } = this.state;
        const todos = tasks.map((value) => <li key={ value }>Count: { value }</li>);
        return (
            <div>
                <ul>{ todos }</ul>
                <ChartPie graphValue={this.state.tasks}/>
            </div>
        );
    }
}

export default App;

Это файл, в котором я строю диаграмму.

import React, {Component} from 'react';
import {Pie} from 'react-chartjs-2';

class ChartPie extends Component{
    constructor(props) {
        super(props);
        this.state = {
            charPieData: {
                labels: ['January','Febraury','March','April'],
                        datasets: [
                            {
                                label:'Count',
                                data:this.props.graphValue,
                                backgroundColor:[
                                    'rgba(255,99,132,0.6)',
                                    'rgba(54,162,235,0.6)',
                                    'rgba(255,206,86,0.6)',
                                    'rgba(75,192,192,0.6)'
                                ]
                            }  
                        ]
            }
        }
    }

    static defaultProps = {
        graphValue : [25,25,25,25]
    }

    render(){
        return (
            <div className="chartPie">
                <Pie
                    data={this.state.charPieData}
                    options={{ }}
                />
            </div>
        )
    }
}

export default ChartPie;

Если я передам хардкорный массив EX:

    return (
        <div>
            <ul>{ todos }</ul>
            <ChartPie graphValue={[25,25,25,25]}/>
        </div>
    );

Работает нормально: я печатаю Список и могу построить диаграмму.

Но если a изменил реквизит и попытался передать массив, полученный из fetch, например:

return (
        <div>
            <ul>{ todos }</ul>
            <ChartPie graphValue={this.state.tasks}/>
        </div>
    );

Он просто печатает список и не строит диаграмму. Это как массив пуст.