Cannot see labels and legend on the pie chart of react-chartjs-2

Question

I cannot see legends and and labels even I hover on it.

Now I am using "chart.js": "^3.7.1", "react-chartjs-2": "^4.1.0" I copied code from several example, but none of them were helpful. I guess this is because of examples are not compatible with new react-chartjs-2 version 4

import React from 'react'
import SideBar from '../../components/sidebar'
import { Chart as ChartJS, ArcElement, defaults } from 'chart.js'
import { Chart } from 'react-chartjs-2'
import ChartDataLabels from 'chartjs-plugin-datalabels'

ChartJS.register(ArcElement)

function SentimentPage() {
  const data = {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [
      {
        label: 'My First Dataset',
        data: [300, 50, 100],
        backgroundColor: [
          'rgb(255, 99, 132)',
          'rgb(54, 162, 235)',
          'rgb(255, 205, 86)',
        ],
        hoverOffset: 4,
      },
    ],
  }

  return (
    <div className="dashBoardPage">
      {/* <SideBar /> */}
      <div className="flex items-center justify-center pt-6">
        <div className="w-60">
          <Chart
            type="doughnut"
            data={data}
            options={{
              plugins: {
                legend: { display: true, position: 'bottom' },
               
              },
            }}
          />
        </div>
      </div>
    </div>
  )
}

export default SentimentPage