reactjs - react-chartjs-2 異なるデータセットを持つ複数のグラフ

Question

状況: サーバーから複数のデータセットを取得しています。各データセットは状態に読み込まれ、それぞれキーと値を持つデータであるラベルに分割されます。各データセットのグラフがあります。データが取得されていることを確認できます。ただし、react-chartjs-2 は 1 つのチャートのみをロードし、他のすべてのチャートは空です。

私は今一週間これを理解しようとしています。ドキュメントを読み、例を見て、同様の質問を見てさまざまな方法/解決策を試しましたが、これまでのところ何も機能していません。

//==================// Load data //==================//
    const reportOneData = {
        labels: reportOneKeys,
        datasets: [
            {
                label:'DAYS IN REVIEW STAGE',
                data: reportOneValue,
        backgroundColor: randoColour(reportOneValue),
        borderWidth: 1,
        borderColor: '#ccc',
        hoverBorderWidth: 3,
        hoverBorderColor: '#333',
        hoverOpacity: 1
            }
        ]
    }
    const reportTwoData = {
        labels: reportTwoKeys,
        datasets: [
            {
                label:'DAYS IN REVIEW STAGE',
                data: reportTwoValue,
        backgroundColor: randoColour(reportTwoValue),
        borderWidth: 1,
        borderColor: '#ccc',
        hoverBorderWidth: 3,
        hoverBorderColor: '#333',
        hoverOpacity: 1
            }
        ]
    }
//==================// Render charts //==================//
    return (
        <>
            <div className="reports-container">
                <h1>Reports by region</h1>

                <h2>{regionName}</h2>
                <button className="print-button" onClick={() => window.print()}>Print this page</button>
                <div className="container">
                    <div className="chart">
                        <Bar
                            data={reportOneData}
                            options={{
                                responsive: true,
                                maintainAspectRatio: false,
                                title:{
                                    display:true,
                                    text: 'NUMBER OF DAYS IN STAGE',
                                    fontSize: '30'
                                },
                                legend: {
                                    display: true,
                                    position: 'right'
                                }
                            }}
                        />
                    </div>
                    <div className="chart">
                        <Line
                            data={reportTwoData}
                            options={{
                                responsive: true,
                                maintainAspectRatio: false,
                                title:{
                                    display:true,
                                    text: 'DECISIONS MADE MONTHLY',
                                    fontSize: '30'
                                },
                                legend: {
                                    display: true,
                                    position: 'right'
                                }
                            }}
                        />
                    </div>
                </div>
                <span></span>
            </div> 
        </>
    )
}

ここからどこへ行くべきかわからない。どんな助けでも感謝します。ありがとうございました。