I'm currently building a realtime chart to test it out. I wrote something to receive data as an example, but it doesn't work. Below is my code.

import { StreamingPlugin, ChartStreaming } from 'chartjs-plugin-streaming'
import {  
  Chart as ChartJS,
  LinearScale,
  CategoryScale,
  RadialLinearScale,
  BarElement,
  PointElement,
  LineElement,
  ArcElement,
  Legend,
  Tooltip
} from 'chart.js'
import {
  Chart,
  Line,
  Pie,
  Doughnut,
  Radar,
  getDatasetAtEvent,
  getElementAtEvent,
  getElementsAtEvent,
} from 'react-chartjs-2'
ChartJS.register(
  LinearScale,
  RadialLinearScale,
  CategoryScale,
  BarElement,
  PointElement,
  LineElement,
  ArcElement,
  StreamingPlugin, 
  Legend,
  Tooltip
)

const data =
{
  datasets :
  [
    {
      label : "real",
      backgroundColor : "rgb(255, 99, 132)",
      borderColor: "rgb(255, 99, 132)",
      fill : false,
      lineTension : 0,
      borderDash: [8,4],
      data : [],
      showLine: true,
    }
  ]
}
console.log(data.datasets[0].data)
const RealTime_ChartTest_options = 
{
  elements : 
  {
    line :
    {
      tesion: 0.5
    }
  },
  scales :
  {
    xAxes: [
      {
        type: "realtime",
        realtime: {
          onRefresh: function () {
            data.datasets[0].data.push({
              x: Date.now(),
              y: Math.random() * 100
            }
            );
          },
          delay: 300,
          refresh: 300
        }
      }
    ],
    yAxes: [
      {
        scaleLabel: {
          display: true,
          fontFamily: "Arial",
          labelString: "Moment",
          fontSize: 20,
          fontColor: "#6c757d"
        },
        ticks: {
          max: 100,
          min: 0
        }
      }
    ]
  }
}

const App = ()=>
{
  retrun(
   <Line data={data} options={RealTime_ChartTest_options} />
  )
}

As a result, the Y-axis and labels are displayed correctly, but the values are not stored in the data in real time and the graph is not drawn.

What am I doing wrong in the code?