chart.jsの初心者：変数を使用してデータでいっぱいの状態を縦棒グラフに表示するのに問題がある

いくつかの数値を例に渡すと、「ColumnChart data = {['Sun'、20]、['Mon'、15]、...」、縦棒グラフは正常に機能します。ただし、後でユーザーが入力した数値を使用するため、データを転送するために変数を使用したいと思います。どうすればこれを修正できますか？また、コンソールにエラーがないため、ヘルプはありません。

import React, {Component} from 'react'
import ReactChartkick, { ColumnChart } from 'react-chartkick'
import Chart from 'chart.js'
import Income from './Income'

class Calculations extends Component {
  state = {
    weeklyIncome : {
         Sunday: 60,
         Monday: 30,
         Tuesday: 50,
         Wednesday: 20,
         Thursday: 200,
         Friday: 100,
         Saturday: 20
     }
  }

  render() {
    const weeklyIncome = this.state
    console.log(weeklyIncome)
    return (
      <div>
          <h2 className="text-center my-5">Weekly Report</h2>
          <ColumnChart data={[
            ["Sun", weeklyIncome.Sunday], 
            ["Mon", weeklyIncome.Monday],
            ["Tue", weeklyIncome.Tuesday],
            ["Wed", weeklyIncome.Wednesday],
            ["Thu", weeklyIncome.Thursday],
            ["Fri", weeklyIncome.Friday],
            ["Sat", weeklyIncome.Saturday]
          ]} />          
          <div>
            <Income/>
          </div>
      </div>
    )
  }
}

export default Calculations