React-Redux, Chart cant display the values into the Chart

Question

Hello guys I am new in React-Redux and i need help if someone can help me. I try to finish my project and I have stack few days now.

I try to generate numbers every 5 seconds, between 400-3500. I store them inside an array with the time they were created. Now I want to split these numbers into 3 datasets in the chart. From 400-1000 is the first dataset. From 1001-2000 is the second and the rest is the third dataset. Every dataset have different color. I use Line Chart with the plugin for realtime.

My problem is that I can display only the first number that i create and i cant display the others. when i try to dispatch the action again to generate new number doenst work at all.

This is my code

main programm

import { coTwoActions } from "../../store/redux";
import { useDispatch, useSelector } from "react-redux";

import React, { useEffect, useState } from "react";
import "chart.js/auto";
import "./chartLiveData.css";
import plugins from "../Settings/plugins";
import { Line } from "react-chartjs-2";
import { Chart } from "chart.js";
import ChartStreaming from "chartjs-plugin-streaming";
import "chartjs-adapter-luxon";
import Zoom from "chartjs-plugin-zoom";

Chart.register(Zoom); // REGISTER PLUGIN
Chart.register(ChartStreaming);

const ChartLiveDataReduxV3 = () => {
  // this give us back dispatch functions to execute
  const dispatch = useDispatch();

  const data = {
    // labels: now, // x axis
    datasets: [
      {
        label: "400-1000 ppm",
        data: [],
        fill: false,
        backgroundColor: "rgba(0, 255, 0, 0.5)",
        showLine: false,
        pointStyle: "circle",
        pointRadius: 5,
        pointHoverRadius: 10,
      },
      {
        label: "1001-2000 ppm",
        data: [],
        fill: false,
        backgroundColor: "rgba(255, 255, 0, 0.5)",
        showLine: false,
        pointStyle: "circle",
        pointRadius: 5,
        pointHoverRadius: 10,
      },
      {
        label: "2001 + ppm",
        data: [],
        fill: false,
        backgroundColor: "rgba(255, 0, 0, 0.5)",
        showLine: false,
        pointStyle: "circle",
        pointRadius: 5,
        pointHoverRadius: 10,
      },
    ],
  }; //data
  

  // call the action to genarate RNG number 400-3500
  useEffect(() => {
    dispatch(coTwoActions.generateRngNum());
    
  }, [dispatch ]);


  let coTwoData = useSelector((state) => state.coTwoData); //data

  const onRefresh = () => {
    
    // dispatch(coTwoActions.generateRngNum());
    let lastValue = coTwoData[coTwoData.length - 1];
    let { x, y } = lastValue; //time, value
    console.log(lastValue);

    if (lastValue.y <= 1000) {
      // console.log(lastValue.y);
      data.datasets[0].data.push({x,y});
      // console.log(data.datasets[0].data);
    }

    if (lastValue.y > 1000 && lastValue.y <= 2000) {
      // console.log(lastValue.y);
      data.datasets[1].data.push({x,y});
      // console.log(data.datasets[1].data);
    }

    if (lastValue.y > 2000) {
      // console.log(lastValue.y);
      data.datasets[2].data.push({x,y});
      // console.log(data.datasets[2].data);
    }
  }; // onRefresh

  const options = {
    scales: {
      x: {
        title: {
          display: true,
          text: "Real-Time",
        },
        type: "realtime",
        realtime: {
          duration: 60000, // range of graph to see
          refresh: 5000, // when to refresh data
          delay: 1000,
          pause: false,
          onRefresh: onRefresh,
        }, //realtime
      }, //x
      y: {
        title: {
          display: true,
          text: "ppm value CO2",
        },
      },
    }, // scales
  };

  return (
    <div>
      <h1 className="centered">
        Carbon Dioxide (CO<sub className="sub">2</sub>
        <span>)</span>
      </h1>
      <div
        className="container container-prop"
        style={{ width: "1000px", margin: "0 auto" }}
      >
        <Line data={data} plugins={plugins} options={options} />
      </div>
    </div>
  );
};
export default ChartLiveDataReduxV3;

and this is the redux

import { createSlice, configureStore } from "@reduxjs/toolkit";

const initialState = {coTwoData:[]};

// const optionsDateTime = {  
// weekday: "long", year: "numeric", month: "short",  
// day: "numeric", hour: "2-digit", minute: "2-digit",
// second: "numeric"
// }; 



const coTwoSlice = createSlice({
    name: "coTwo",
    initialState: initialState,
    reducers: {
        generateRngNum(state) {        
                state.coTwoData.push({
                    x: Date.now(),// x
                    y:Math.floor(Math.random() * (3500 - 400 + 1) + 400), // y 
                })
        },        
    }
});
// this way is with slice to create store
const store = configureStore({
    reducer: coTwoSlice.reducer
});
export const coTwoActions = coTwoSlice.actions;
export default store;