react-chartjs-2 ラベルのクリックを検知したい

Question

やりたいこと

Reactでchart.jsを使って円グラフを表示しました。
そのグラフの特定の項目をクリックしたときに、ラベル値とデータ値を取得したいです。

ソースコード

import {Pie} from "react-chartjs-2";
import styled from "styled-components";
import { useEffect, useState } from "react";
import axios from "axios";
import ChartDataLabels from 'chartjs-plugin-datalabels';
import "chart.js";

const Container = styled.div`
  position: relative;
  width: 330px;
  margin: 20px auto 0 auto;
  @media(min-width: 376px) {
    width: 360px;
  }
  @media(min-width: 600px) {
    width: 400px;
  }
  @media(min-width: 900px) {
    width: 50%;
    padding: 0;
    margin-top: 0;
    margin-left: 20px;
  }
`;

const TimeChart = (props) => {

  const [chartData, setChartData] = useState([]);

  let dateString = `${props.nowDay.getFullYear()},${props.nowDay.getMonth()+1},${props.nowDay.getDate()}`

  useEffect(() => {
    axios.get(`http://localhost:3001/timeLog/timeChart/${dateString}`,
      {
        headers: {accessToken: localStorage.getItem("accessToken")}
      }
    ).then((res) => {
      const tmp = [];
      res.data.forEach((data) => {
        const startTimeData = data.start_time.split(",");
        const startTime = new Date(startTimeData[0], startTimeData[1]-1, startTimeData[2], startTimeData[3], startTimeData[4]);
        const finishTimeData = data.finish_time.split(",");
        const finishTime = new Date(finishTimeData[0], finishTimeData[1]-1, finishTimeData[2],finishTimeData[3], finishTimeData[4]);
        data.start_time = startTime;
        data.finish_time = finishTime;
        if (finishTime - startTime > 0) tmp.push(data);
      });
      setChartData(tmp);
    });
  }, [dateString, props.isDoing]);

  if (chartData.length !== 0) {
    chartData.sort((a, b) => a.start_time - b.start_time);
    if (
      chartData[0].start_time.getDate() !== chartData[0].finish_time.getDate()
    ) {
      const newDate = chartData[0].start_time.getDate()+1;
      chartData[0].start_time = new Date(chartData[0].start_time.getFullYear(), chartData[0].start_time.getMonth(), newDate);
    }
    if (
      chartData[chartData.length-1].start_time.getDate() !== chartData[chartData.length-1].finish_time.getDate()
    ) {
      const newDate = chartData[chartData.length-1].finish_time.getDate()-1;
      chartData[chartData.length-1].finish_time = new Date(chartData[chartData.length-1].finish_time.getFullYear(), chartData[chartData.length-1].finish_time.getMonth(), newDate);
    }

    const makeFree = (start_time, finish_time) => {
      return {
        item_name: "空き時間",
        start_time: start_time,
        finish_time: finish_time,
        color: '#d5d5d5'
      }
    }
    const ts = chartData[0].start_time;
    if (ts - new Date(ts.getFullYear(), ts.getMonth(), ts.getDate()) > 0) {
      const free = makeFree(new Date(ts.getFullYear(), ts.getMonth(), ts.getDate()), ts);
      setChartData([...chartData, free]);
    }

    const tf = chartData[chartData.length -1].finish_time;
    if (new Date(tf.getFullYear(), tf.getMonth(), tf.getDate(), 23, 59) - tf > 4*6000) {
      const free = makeFree(tf, new Date(tf.getFullYear(), tf.getMonth(), tf.getDate(), 23, 59));
      setChartData([...chartData, free]);
    }

    for (let i = 0; i < chartData.length-1; i++) {
      const timeLog = chartData[i+1].start_time - chartData[i].finish_time;
      if (timeLog > 4) {
        const free = makeFree(chartData[i].finish_time, chartData[i+1].start_time);
        setChartData([...chartData, free]);
      }
    }
  }

  const times = [];
  const labels = [];
  const backgroundColors = [];
  chartData.forEach((data) => {
    let time = (data.finish_time - data.start_time) / (60 * 1000);
    if (chartData[chartData.length-1] === data) time += 1;
    times.push(time);
    labels.push(data.item_name);
    backgroundColors.push(data.color);
  });

  const data = {
    labels: labels,
    datasets: [{
      data: times,
      backgroundColor: backgroundColors,
      borderWidth: 0.5,
      borderColor: '#0d0d0d',
      datalabels: {
        labels: {
          data: {
            align: 'start',
            formatter: (value, context) => {
              const label = context.chart.data.labels[context.dataIndex];
              let hour = ~~(value / 60);
              const tmp = hour * 60;
              let minutes = value - tmp;
              hour = ("0" + hour).slice(-2);
              minutes = ("0" + minutes).slice(-2);
              if (label === "空き時間") return null;
              return `${label}\n   ${hour}:${minutes}`;
            },
          },
        }
      }
    }]
  }

  const options = {
    plugins: {
      datalabels: {
        color: '#0d0d0d',
        anchor: 'end',
        font: {
          size: 10,
        },
        clamp: true,
      },
      legend: {
        display: false
      },
    },
  }

  return (
    <Container>
      <Pie
        data={data}
        plugins={[ChartDataLabels]}
        options={options}
      />
    </Container>
  );

}

export default TimeChart;

試したこと

Qiitaの記事を参考にして、「Pie」コンポーネントに「onElementsClick」を追加したところ、 Unknown event handler property `onElementsClick`. It will be ignored. と警告が出て、クリックイベントが作動しませんでした。