圆环图中的选项错误：Uncaught TypeError: Cannot read properties of undefined React

Question

我在 React 中使用 Doughnut 图表形式 chart.js。 这段代码给我错误。

renderDoughnutChart(data, label) {
    
    const chartData = {
      labels: [],
      datasets: [{
        label: 'My First Dataset',
        data: [],
        backgroundColor: [
          Colors.primary,
          Colors.secondary,
          Colors.danger,
          Colors.warning
        ],
        hoverBackgroundColor: [
          'rgb(143, 0, 180, 0.3)',
          'rgb(0, 196, 204, 0.3)',
          'rgb(206, 0, 0, 0.3)',
          'rgb(255, 179, 0, 0.3)'
        ],
        hoverOffset: 30
      }]
    };

    const options = {
      responsive: true,
      legend: {
        display: false,
        position: 'right',
      },
      title: {
        display: true,
        fontSize: 20,
        text: 'My Title'
      },
    };

    data.map((value) => {
      if(value.value >= 0)
        chartData.datasets[0].data.push(value.value)
      else
        chartData.datasets[0].data.push(0)
      chartData.labels.push(value.label)
    })

    return (
      <div style={{ width: '50%'}}>
        <Doughnut 
          data = { chartData } 
          options = { options }
        />
      </div>
    )
  }

Error:index.js:188 Uncaught TypeError: Cannot read properties of undefined (reading 'configMerge')

但是如果我不将 options = {options} 传递给 Doughnut 组件，它就可以正常工作。什么可能导致错误？

使用的依赖版本：

chart.js: @3.3.0

react-chartjs-2: @2.9.0

进口：

import { Chart } from "chart.js/auto"

import { Line, Doughnut } from 'react-chartjs-2'