Scroll continuously while condition is true using React Native’s ScrollView

I’m currently implementing a drag-and-drop list using react-native-gesture-handler. The list is implemented as a simple Array.map() within a ScrollView since a FlatList would be incompatible with some other UI structures used in the app.

I’ve got the drag and drop functionality working but am struggling with the last requirement, which is auto-scrolling the ScrollView when the user drags an item to the top or bottom screen edge. Basically, I’m looking for a way to do this:

while (someCondition) {
  scrollViewRef.current.slowlyScrollDown();
}

I’ve tried to do something like this:

const handleDrag = useCallback((absoluteY) => {
  const scrollThreshold = 100; // pixels from top/bottom to trigger scroll

  if (autoScrollTimerRef.current) {
    clearInterval(autoScrollTimerRef.current);
  }

  if (absoluteY < scrollThreshold) {
    // Scroll up
    const newOffset = currentScrollOffset - 10;
    autoScrollTimerRef.current = setInterval(() => {
      containerRef.current?.scrollTo({y: newOffset, animated: true});
    }, 1000 / 60);
    setCurrentScrollOffset(newOffset);
  } else if (absoluteY > screenHeight - scrollThreshold) {
    // Scroll down
    const newOffset = currentScrollOffset + 10;
    autoScrollTimerRef.current = setInterval(() => {
      containerRef.current?.scrollTo({y: newOffset, animated: true});
    }, 1000 / 60);
    setCurrentScrollOffset(newOffset);
  }
}, []);

However, this is extremely janky and in general not a pleasant experience. I’d suppose this is because the previous scroll animation didn’t complete when the next animation cycle starts.

Is there any better way to do this?