Data is not updated in react when used useState

I am new to ReactJs .I’m trying to use the useState hook in react function base component but the value of the state is not getting updated when I am calling the function. When receiving data via websocket, it is not possible to update the data on the line graph using the construct useState and useEffect.

client receives data via websocket:

const myWs = new WebSocket('ws://localhost:8000');
// обработчик проинформирует в консоль когда соединение установится
myWs.onopen = function () {
    console.log('подключился');
};

// обработчик сообщений от сервера
myWs.onmessage = function (message) {
    const jsonParse = JSON.parse(message.data);      
    try {   
      
      let temp = {x:setInterval((counter) =>{
        if(mockLineData[0].data.length >= 50){
          mockLineData[0].data.shift();
          counter++
        }
        else{
          counter++
        }
      }, 3000), y:jsonParse[0]['value_state']};
      mockLineData[0].data.push(temp);
      console.log(mockLineData[0].data);

    } catch (error) {
        console.log('Error: ', error);
    }
};




export const mockLineData = [
  {
    id: "ИБП Uвх",
    color: tokens("dark").redAccent[200],
    data: [
      {
        x: 0,
        y: 0
      },
      
    ],
  },
];

Next I’m trying to update data in a table using the construct useState and useEffect

const LineChart = ({ isCustomLineColors = false, isDashboard = false }) => {
  const theme = useTheme();
  const colors = tokens(theme.palette.mode);
  const [state, setState] = useState();
  
  useEffect(() => {
    setInterval(()=>{
      setState(data);
    },1000)
  }, []);


  return (
    <ResponsiveLine
      data={state}
      theme={{
        axis: {
          domain: {
            line: {
              stroke: colors.grey[100],
            },
          },
          legend: {
            text: {
              fill: colors.grey[100],
            },
          },
          ticks: {
            line: {
              stroke: colors.grey[100],
              strokeWidth: 1,
            },
            text: {
              fill: colors.grey[100],
            },
          },
        },
        legends: {
          text: {
            fill: colors.grey[100],
          },
        },
        tooltip: {
          container: {
            color: colors.primary[500],
          },
        },
      }}
      colors={isDashboard ? { datum: "color" } : { scheme: "nivo" }} // added
      margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
      enableGridX={false}
      enableGridY={false}
      pointSize={8}
      pointColor={{ theme: "background" }}
      pointBorderWidth={2}
      pointBorderColor={{ from: "serieColor" }}
      pointLabelYOffset={-12}
      useMesh={true}
      legends={[
        {
          anchor: "bottom-right",
          direction: "column",
          justify: false,
          translateX: 100,
          translateY: 0,
          itemsSpacing: 0,
          itemDirection: "left-to-right",
          itemWidth: 80,
          itemHeight: 20,
          itemOpacity: 0.75,
          symbolSize: 12,
          symbolShape: "circle",
          symbolBorderColor: "rgba(0, 0, 0, .5)",
          effects: [
            {
              on: "hover", //hover
              style: {
                itemBackground: "rgba(0, 0, 0, .03)",
                itemOpacity: 1,
              },
            },
          ],
        },
      ]}
    />
  );
};

export default LineChart;

but the data is not updated