chart.tsx:70 Uncaught TypeError: Cannot read properties of undefined (reading 'labels')

Question

i'm trying to create a chart but facing this error. this is my first time creating a chart. it looks like error is coming from ForwardRef or i did some mistype.. here's the error snapshot

import React from 'react';
import { Card, CardHeader, CardContent, Typography } from '@material-ui/core';
import { Doughnut } from 'react-chartjs-2';
import useStyles from './styles';
import useTransactions from '../../useTransactions';

const Details = ({ title }) => {
  const classes = useStyles();
  const { total, chartData } = useTransactions(title);
  return (
    <Card className={title === 'Income' ? classes.income : classes.expense}>
      <CardHeader title={title} />
      <CardContent>
        <Typography variant='h5'>₹{total}</Typography>
        <Doughnut date={chartData} />
      </CardContent>
    </Card>
  );
};

export default Details;