"Cannot read propery "defaults" of undefined" error while using react-chartjs-2

Getting error after setting up chart component in react.

Error:

Code:

import React, {useEffect, useState} from 'react';

import {Line} from 'react-chartjs-2';

import './EloChart.css';


const EloChart = props => {

  const [chartData,setChartData] = useState({})

  const chart = () => {
    setChartData({
      labels: ['december','january','february','march','april'],
      datasets: [
        {
          label: 'elorating',
          data: [1500, 1600, 1700, 1800, 1900],
          backgroundColor: [
            'rgba(75, 192, 192, 0.6)'
          ]
        }
      ]
    })
  }

  
  useEffect(()=> {
    chart()
  }, [])

  return (
    <section className="elo-chart" >
      <h2>Elo Chart</h2>
        <Line data={chartData}/>
    </section>
  );
};

export default EloChart;

Package.json:

  "dependencies": {
    "chart.js": "^3.1.0",
    "react": "^16.8.6",
    "react-chartjs-2": "^2.11.1",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"