react-chartjs-2甜甜圈图中只有标题未更新

我正在使用react-chartjs-2在我的网站中实现甜甜圈图。

下面是我用来呈现图表的代码。

const Doughnut = (props) => {
  const { title, labels, colors, projects, percentages, width, height } = props;
  console.log(`title:${title}`); //this logs proper title
  const plugins = [
    {
      beforeDraw: function (chart) {
        console.log(`title:${title}`); //this logs previous title and thus renders previous title
        var width = chart.width,
          height = chart.height,
          ctx = chart.ctx;
        ctx.restore();
        var fontSize = (height / 240).toFixed(2);
        ctx.font = fontSize + "em sans-serif";
        ctx.textBaseline = "top";
        var text = `${title}`,
          textX = Math.round((width - ctx.measureText(text).width) / 2),
          textY = height / 2;
        ctx.fillText(title, textX, textY);
        ctx.save();
      },
    },
  ];

  const data = {
    datasets: [
      {
        data: percentages,
        backgroundColor: colors,
      },
    ],
  };

  return (
    <DoughnutChart
      data={data}
      plugins={plugins}
      width={width}
      height={height}
    />
  );
};

我将甜甜圈图的详细信息从父组件传递到子组件，所有道具都正确传递。当我在beforeDraw函数外部记录props.title时，它会记录正确的值，但当我在beforeDraw函数内部记录props.title时，它将记录标题的前一个值，从而呈现标题的前值。

我在这里做错了什么？