Why does this bar chart refresh when the others do? - reactjs

Question

I'm sorry for not being good at English.
Using the KendoUI React demo, I've encountered a weird issue with the bar charts.
I gave each chart an interval of 3, 5, or 10 seconds, intending that each one refreshes by 3 seconds, 5 seconds, and 10 seconds.
But when I turn on the dev mode and confirm it, the charts refresh together every second the other chart does.
FYI, This code is to be child components into a map of the parent component, so I cannot divide that component by each page.
I hope to get a good answer to this situation.
pages/disk-index
import { Chart, ChartTooltip, ChartSeries, ChartSeriesItem } from '#progress/kendo-react-charts';
import { useState, useEffect, useRef } from 'react';
import Disk from './disk';
export default function Home() {
const intervalDisk = useRef(null);
const diskData1 = [{ categoryField: 'root', value: 40, color: 'blue' }];
const [diskData1State, setDiskData1State] = useState(diskData1);
const isClient = typeof window === 'object';
useEffect(() => {
if (isClient) {
intervalDisk.current = setInterval(() => {
diskData1[0].value = Math.floor(Math.random() * 100);
// console.log(new Date() + ', ' + diskData1[0].value);
setDiskData1State(JSON.parse(JSON.stringify(diskData1)));
}, 10000);
return () => clearInterval(intervalDisk.current);
}
}, []);
return (
<>
<Disk diskId="1" interval="3000" />
<Disk diskId="2" interval="5000" />
<div id="diskDataId2">
<Chart
style={{
width: '90%',
height: '85%',
position: 'center center',
}}
>
<ChartTooltip />
<ChartSeries>
<ChartSeriesItem
type="bar"
stack={{
type: 'normal',
}}
gap={2}
spacing={0.35}
categoryField="categoryField"
colorField="color"
data={diskData1}
tooltip={true}
/>
</ChartSeries>
</Chart>
</div>
</>
);
}
pages/disk
import { Chart, ChartTooltip, ChartSeries, ChartSeriesItem } from '#progress/kendo-react-charts';
import { useState, useEffect, useRef } from 'react';
export default function Disk(props) {
console.log(JSON.stringify(props));
const intervalDisk = useRef(null);
const diskData1 = [{ categoryField: 'root', value: 40, color: 'red' }];
const [diskData1State, setDiskData1State] = useState(diskData1);
useEffect(() => {
intervalDisk.current = setInterval(() => {
diskData1[0].value = Math.floor(Math.random() * 100);
// console.log(new Date() + ', ' + diskData1[0].value);
setDiskData1State(JSON.parse(JSON.stringify(diskData1)));
}, Number(props.interval));
return () => clearInterval(intervalDisk.current);
}, [diskData1State]);
return (
<>
<div id={'diskData' + props.diskId}>
<Chart
style={{
width: '90%',
height: '85%',
position: 'center center',
}}
>
<ChartTooltip />
<ChartSeries>
<ChartSeriesItem
type="bar"
stack={{
type: 'normal',
}}
gap={2}
spacing={0.35}
categoryField="categoryField"
colorField="color"
data={diskData1State}
tooltip={true}
/>
</ChartSeries>
</Chart>
</div>
</>
);
}
enter image description here