window.scrollTo to my previous position works but its going top then going the desire position

Question

const GeneratorGraph = () => {
  const scrollPosition = useRef(0);
  const [genData, setGenData] = useState<any>();


  const [chartKey, setChartKey] = useState(0);
  const [totalLoad, setTotalLoad] = useState();
  const [generatorName, setaGeneratorName] = useState<any>();
  const [generatorCapacity, setaGeneratorCapacity] = useState<any>();
  const [totalCapacity, setTotalCapacity] = useState();
  const [totalAllCapacity, setTotalAllCapacity] = useState();
  const [loadValue, setLoadValue] = useState([]);
  const [loadCenterValue, setLoadCenterValue] = useState("");

  const [PFValue, setPFValue] = useState([]);
  const [PFCenterValue, setPFCenterValue] = useState("");

  const [avlCapacity, setAvlCapacity] = useState([]);
  const [avlCapacityCV, setAvlCapacityCV] = useState("");

  const [APValue, setAPValue] = useState([]);
  const [APCenterValue, setAPCenterValue] = useState("");

  const [TDAPValue, setTDAPValue] = useState([]);
  const [TDAPCenterValue, setTDAPCenterValue] = useState("");

  const [TotalAPValue, setTotalAPValue] = useState([]);
  const [TotalAPCenterValue, setTotalAPCenterValue] = useState("");

  useEffect(() => {
    const generator = async () => {
      const res = await generatorData();
      setGenData(res?.data);
    };
    generator();
    const interval = setInterval(generator, 20000);

    // Clean up the timer when the component unmounts
    return () => {
      clearInterval(interval);
    };
  }, []);

  const totalloadArray: any = [];
  const totalPFArray: any = [];
  const avlCapacityArray: any = [];
  const totalAPArray: any = [];
  const todayAPArray: any = [];
  const totalallAPArray: any = [];

  useEffect(() => {
    const generatorName = genData
      ?.filter((gd: any) => gd?.ES == "1")
      ?.map((gd: any) => gd?.name);
    setaGeneratorName(generatorName);

    const generatorCapacity = genData
      ?.filter((gd: any) => gd?.ES == "1")
      ?.map((gd: any) => gd?.capacity - parseInt(gd?.PGEN));
    setaGeneratorCapacity(generatorCapacity);
    //Active POwer
    genData
      ?.filter((gd: any) => gd?.ES == "1")
      ?.map((gd: any) => totalAPArray.push(parseInt(gd?.PGEN)));

    setAPValue(totalAPArray);

    const activePowerCV = genData
      ?.filter((gd: any) => gd?.ES == "1")
      ?.reduce((total: any, gd: any) => total + parseInt(gd?.PGEN), 0);
    setAPCenterValue(activePowerCV?.toFixed(2));
    //today Active Power
    genData
      ?.filter((gd: any) => gd?.ES == "1")
      ?.map((gd: any) => todayAPArray.push(parseInt(gd?.TACP)));

    setTDAPValue(todayAPArray);
    const TDactivePowerCV = genData
      ?.filter((gd: any) => gd?.ES == "1")
      ?.reduce((total: any, gd: any) => total + parseInt(gd?.TACP), 0);

    setTDAPCenterValue(TDactivePowerCV?.toFixed(2));
    //total Active Power
    genData
      ?.filter((gd: any) => gd?.ES == "1")
      ?.map((gd: any) => totalallAPArray.push(parseInt(gd?.TOAP) / 1000));

    setTotalAPValue(totalallAPArray);
    const TotalactivePowerCV = genData
      ?.filter((gd: any) => gd?.ES == "1")
      ?.reduce((total: any, gd: any) => total + parseInt(gd?.TOAP) / 1000, 0);

    setTotalAPCenterValue(TotalactivePowerCV?.toFixed(2));

    //total Capacity values
    //available Capacity
    const totalCapacity = genData
      ?.filter((gd: any) => gd?.ES == "1")
      ?.reduce((total: any, generator: any) => total + generator?.capacity, 0);
    setTotalCapacity(totalCapacity);
    //all Capacity
    const totalAllCapacity = genData?.reduce(
      (total: any, generator: any) => total + generator?.capacity,
      0
    );
    setTotalAllCapacity(totalAllCapacity);

    const leftCapacity = totalAllCapacity - totalCapacity;
    const availCapacity = (totalCapacity * 100) / totalAllCapacity;
    avlCapacityArray.push(totalCapacity, leftCapacity);
    setAvlCapacity(avlCapacityArray);
    setAvlCapacityCV(availCapacity?.toFixed(2)?.toString());
    //total Power
    const totalPower = genData
      ?.filter((gd: any) => gd?.ES == "1")
      ?.reduce(
        (total: any, generator: any) =>
          total + parseFloat(generator?.PGEN || 0),
        0
      );
    setTotalLoad(totalPower);
    //total PF
    let totalPF = genData
      ?.filter((gd: any) => gd?.ES == "1")
      ?.reduce(
        (total: any, generator: any) => total + parseFloat(generator?.PF || 0),
        0
      );
    totalPF = totalPF / genData?.filter((gd: any) => gd?.ES == "1")?.length;
    setPFCenterValue(totalPF?.toFixed(2));
    const lefPF = 1 - totalPF;
    totalPFArray.push(parseFloat(totalPF), parseFloat(lefPF.toFixed(2)));
    setPFValue(totalPFArray);
    //total load
    const totalLoad = (totalPower / totalCapacity) * 100;
    setLoadCenterValue(totalLoad.toFixed(2));
    const leftLoad = 100 - totalLoad;
    totalloadArray.push(
      parseInt(totalLoad.toFixed(2)),
      parseInt(leftLoad.toFixed(2))
    );

    setLoadValue(totalloadArray);

    setChartKey((prevKey) => prevKey + 1);
  }, [genData]);

//here the scroll function....

  const handleScroll = () => {
    scrollPosition.current = window.scrollY;
    // scrollPosition.current = window.scrollX;
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  useEffect(() => {
    window.scrollTo(0, scrollPosition.current);
  }, [loadValue]);

in my next app, an API calls every 20 seconds, and when the API is called my browser position goes to the top. but I don't want to change my browser scroll position. then I fixed it but now it's going top first then comes to the position I want. that is very weird to look at. how can I fix that? after the data update, it needs to show the exact position, not go through the top to the exact position.

How to return to the same scroll position when Component re-rendering