Reactjs – The setInterval function is getting executed twice instead of once at every timeout in my React Project

Here is the React component that is causing me issues…

import { useEffect, useState, useRef } from "react";
import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement,
} from "chart.js";

ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);

const Time = () => {
  let now = new Date();
  let hour = now.getHours();
  let minute = now.getMinutes();
  let second = now.getSeconds();

  return `${hour}-${minute}-${second}`;
};

const LineGraph = () => {
  const [dataSet, setDataset] = useState([0]);
  const labels = useRef([0]);

  useEffect(() => {
    const interval = setInterval(() => {
      if (labels.current.length > 10) {
        const newLabels = dataSet.slice(1, dataSet.length);
        const newLabel = Math.floor(Math.random() * 1000);
        labels.current.value = [...newLabels, newLabel];
      } else {
        labels.current = [...labels.current, Time()];
      }
      setDataset((dataSet) => {
        if (dataSet.length > 10) {
          const newDataSet = dataSet.slice(1, dataSet.length);
          const newValue = Math.floor(Math.random() * 1000);
          return [...newDataSet, newValue];
        } else {
          const newValue = Math.floor(Math.random() * 1000);
          return [...dataSet, newValue];
        }
      });
    }, 1000);
  }, []);

  const data = {
    labels: labels.current,
    datasets: [
      {
        data: dataSet,
      },
    ],
  };
  return (
    <div className={styles.graph}>
      <Line data={data}></Line>
    </div>
  );
};

export default LineGraph;

The issue is that 2 values are getting added to the state array because the setInterval function is being called twice for some reason, I would highly appreciate an explanation as to why this is happening.