Reactjs Auto Scroll: How to improve the performance of auto scroll when there are many records (500 or more)

Question

Currently I'm building a function that automatically scrolls back the list.

Example: I have an array [1,2,3,4,5,6,7,8,9], on the interface I will give it auto-scroll from 1 to 9 and when the number 9 is displayed, the number 1 will be serialized after the number 9 and so on.

Here my code: https://stackblitz.com/edit/auto-scroll-price-stream

import React, { Children, useEffect } from "react";
import { useMeasureChildren } from "./hooks/useMeasureChildren";
import { getChildrenHeight, getFrontItemHeight } from "./heplers";
import { FPS, SPEED } from "./constants";

const AutoScroll = ({ children, className, height, speed, fps }: any) => {
  const measureResults = useMeasureChildren(children.length);

  useEffect(() => {
    let globalOffsetY = 0;
    let offsetY = Array.from({ length: children.length }).map(() => 0);
    const childrenHeight = getChildrenHeight(measureResults);
    let handle: any;
    if (height < childrenHeight) {
      handle = setInterval(() => {
        globalOffsetY -= 0.1 * speed;
        if (globalOffsetY < -childrenHeight) {
          globalOffsetY += childrenHeight;
          offsetY = offsetY.map(() => 0);
        }
        measureResults &&
          measureResults.forEach(({ node }: any, idx) => {
            if (node) {
              if (
                globalOffsetY + offsetY[idx] <=
                -getFrontItemHeight(measureResults, idx)
              ) {
                offsetY[idx] = childrenHeight;
              }
              node.style.transform = `translateY(${
                globalOffsetY + offsetY[idx]
              }px)`;
            }
          });
      }, 1000 / (fps || FPS));
    }

    return () => {
      handle && clearInterval(handle);
    };
  }, [measureResults]);

  return (
    <div
      className={`${className} auto-scroll`}
      style={{
        height: `${height}px`,
        overflowY: !speed ? "auto" : "hidden",
      }}
    >
      {Children.map(children, (child, idx) => {
        return <div ref={measureResults[idx].measureRef}>{child}</div>;
      })}
    </div>
  );
};

export default AutoScroll;

It worked!

But as the data got bigger, I started to realize its performance is not so good.

So I hope can improve performance or code (1000 rows is ok)