Next.jsでchartjs-plugin-streamingを使ったリアルタイムグラフが表示されない

前提・実現したいこと

Next.jsでchartjs-plugin-streamingを使ったリアルタイムグラフを作ろうと思い、
こちらのチュートリアルを真似て見たのですが、グラフ表事態は表示されているのにもかかわらず、実際のリアルタイムグラフについては一切表示されません。グラフを表示するにはどの様にしたらよろしいでしょうか？ご教示お願い致します。
※エラーなどの表示は特にありません。

該当のソースコード

components/Chart.js

javascript
1import { Line } from 'react-chartjs-2';
2import 'chartjs-plugin-streaming';
3
4const Chart = () => {
5  return (
6    <div>
7       <Line 
8  data={{
9  datasets: [{
10    label: 'Dataset 1',
11    borderColor: 'rgb(255, 99, 132)',
12    backgroundColor: 'rgba(255, 99, 132, 0.5)',
13    lineTension: 0,
14    borderDash: [8, 4]
15  }, {
16    label: 'Dataset 2',
17    borderColor: 'rgb(54, 162, 235)',
18    backgroundColor: 'rgba(54, 162, 235, 0.5)'
19  }]
20}}
21
22options={{
23  scales: {
24    xAxes: [{
25      realtime: {
26        onRefresh: function(chart) {
27          chart.data.datasets.forEach(function(dataset) {
28            dataset.data.push({
29              x: Date.now(),
30              y: Math.random()
31            });
32          });
33        },
34        delay: 2000
35      }
36    }]
37  }
38}}
39
40/>
41    </div>
42  )
43}
44
45export default Chart;