How to include data labels in "hover-over" animation of Chart.js component in React?

Question

In my React application I am using react-chartjs-2 as a Chart.js wrapper, and I am using the plugin chartjs-plugin-datalabels to display the respective values (of my dataset) on my chart.

Chart.js provides a beautiful animation when hovering over "segments" (such as the "segments" of a doughnut chart). However, the data labels do not move together with the respective "segment" when hovering over it.

Is there a possibility to include them in this "hover-over" animation?

Here is an example that demonstrates the behavior I am describing (the data labels do not move while hovering over the doughnut's segments):

import React from 'react';
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
  defaults,
} from 'chart.js';
import { Doughnut } from 'react-chartjs-2';
import ChartDataLabels from 'chartjs-plugin-datalabels';

ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);

defaults.plugins.legend.display = true;

export const data = {
  labels: ['Red', 'Orange', 'Yellow', 'Light Green', 'Green'],
  // labels: [],
  datasets: [
    {
      data: [100, 100, 100, 100, 100],
      backgroundColor: [
        'rgba(255, 0, 0, 1)',
        'rgba(255, 153, 51, 1)',
        'rgba(255, 255, 0, 1)',
        'rgba(153, 255, 153, 1)',
        'rgba(0, 255, 0, 1)',
      ],
      borderColor: [
        'rgba(255, 255, 255, 1)',
        'rgba(255, 255, 255, 1)',
        'rgba(255, 255, 255, 1)',
        'rgba(255, 255, 255, 1)',
        'rgba(255, 255, 255, 1)',
      ],
      hoverBackgroundColor: [
        'rgba(255, 0, 0, 1)',
        'rgba(255, 153, 51, 1)',
        'rgba(255, 255, 0, 1)',
        'rgba(153, 255, 153, 1)',
        'rgba(0, 255, 0, 1)',
      ],
      hoverBorderColor: [
        'rgba(255, 255, 255, 1)',
        'rgba(255, 255, 255, 1)',
        'rgba(255, 255, 255, 1)',
        'rgba(255, 255, 255, 1)',
        'rgba(255, 255, 255, 1)',
      ],
      hoverOffset: 10,
      offset: 0,
      borderWidth: 1,
    },
  ],
};

export const options = {
  plugins: {
    datalabels: {
      display: true,
    },
  },
  layout: { padding: 5 },
  maintainAspectRatio: false,
};

export default function Chart1() {
  return (
    <div>
      <Doughnut height={500} width={500} data={data} options={options} />
    </div>
  );
}