Несколько наборов данных не работают с использованием перехватчиков реакции с реактивной диаграммой js -2

Question

• 1000 перестал работать, похоже, он настроен правильно, но данные не передаются на график в пользовательском интерфейсе, я не понимаю, почему, вот код:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Line } from 'react-chartjs-2';


const Graph = () => {

   const [chartData, setChartData] = useState({});
   console.log(chartData)
   console.log(chartData.data)
   const chart = () => {
      let weightArr = [];
      let bfArr = [];
      let dateArr = [];
      axios
        .get("http://localhost:9090/pt_server/index.php")
        .then(res => {
          console.log(res);
          for (const dataObj of res.data) {
            weightArr.push(parseInt(dataObj.weight));
            bfArr.push(parseInt(dataObj['body_fat']));
            dateArr.push(dataObj.date);
            console.log(weightArr);
            console.log(dateArr);
            console.log(bfArr);
          }
         });
      setChartData({
         labels: dateArr,
         datasets: [{
               label: 'Weight (lb)',
               data: weightArr,
               backgroundColor: ["rgba(75, 192, 192, 0.6)"],
               borderWidth: 4,
               yAxisID: 'left-y-axis'
            }, {
               label: 'Body Fat %',
               data: bfArr,
               backgroundColor: ["rgba(75, 192, 192, 0.6)"],
               borderWidth: 4,
               yAxisID: 'right-y-axis'
            }]
      });
   }

   useEffect(() => {
      chart();
   }, [])

   return (
      <>
         <Line
         data={chartData}
         options={{
         responsive: true,
         title: { text: "THICCNESS SCALE", display: true },
         scales: {
            yAxes: [
                     {
                     type: 'linear',
                     display: true,
                     position: 'left',
                     id: 'left-y-axis',
                     labels: {
                        show: true
                     }
               },
               {
                     type: 'linear',
                     display: true,
                     position: 'right',
                     gridLines: {
                        display: false
                     },
                     id: 'right-y-axis',
                     labels: {
                        show: true
                     }
                     }
                  ]
         }
         }}
         />
      </>
      );
   }

export default Graph;

Вот что я получаю в своем пользовательском интерфейсе: неправильный график и вот что показывает мне моя chrome консоль: консоль браузера

Я console.log записал массивы, которые вы можно увидеть в приведенном выше коде