Incompatibility with pagination

[nightwolf-041]

hi,
i have a react-virtouso list with 3 behavior :

1. it has a prev/next button to slide between items.
2. it has a jump button to jump to special item.
3. it has a scroll to going to what item we want

for handle these three behaviors i have a state in parent component that is save changed item index/id and i have a other current index in list component.
when i click on buttons or scroll list, it should change these states and focus on current item.

so in list component i have :

export const VerticalList: FC<VerticalListProps> = (props) => {
  const { items, visibleIndex, onChange } = props;

  const currentRef = useRef(0);

  const ref = useRef<any>();

  useEffect(() => {
    if (visibleIndex !== currentRef.current) {
      ref.current.scrollToIndex({
        index: visibleIndex,
        align: 'start',
        behavior: 'smooth',
      });
    }
  }, [visibleIndex]);

  return (
    <Virtuoso
      ref={ref}
      data={items}
      itemContent={(_, item) => item}
      itemsRendered={(renderedItems) => {
        const isStartOfList = renderedItems[0].index === 0;
        const isEndOfList =
          items.length - 1 === renderedItems[renderedItems.length - 1].index;

        let childIndex = 0;
        if (isEndOfList) {
          childIndex = renderedItems[renderedItems.length - 1].index;
        } else if (!isStartOfList) {
          childIndex = renderedItems[1] ? renderedItems[1].index : renderedItems[0].index;
        }
        currentRef.current = childIndex;
        onChange(childIndex);
      }}
    />
  );
};

and here is my parent component :

// this is prev/next buttons handler
  const onNavClick = (direction: Direction) => {
    const currentQuestionIndex = visibleQuestions.findIndex(
      (q) => q.id === selectedQuestionId,
    );
    let targetQuestionIndex;

    if (direction === Direction.Left) {
      targetQuestionIndex = getPreviousIndex(items.length, currentQuestionIndex);
    } else {
      targetQuestionIndex = getNextIndex(items.length, currentQuestionIndex);
    }
    setSelectedQuestionId(visibleQuestions[targetQuestionIndex].id);
  };

// this is jump button handler
  const onNumberSelect = (id) => {
    setSelectedQuestionId(id);
  };

// this is the list
 <VerticalList
    items={items}
    visibleIndex={visibleQuestions.findIndex(
      (visibleQuestion) => visibleQuestion.id === selectedQuestionId,
    )}
    onChange={
      (index) => setSelectedQuestionId(visibleQuestions[index].id)
    }
 />

// this is my naviagtor
 <HorizontalNavigator
     activeId={selectedQuestionId}
     setActiveId={setSelectedQuestionId}
     onJumpClick={() => setShowSelector(!showSelector)}
     onNavClick={onNavClick}
 />

but when I click on the buttons, the onChange called at the same time, and this causes the buttons to work slowly and sometimes not.
If I delete the onChange function, everything will be fine, but current item can no longer be changed by scrolling in the list.

what i need to do ?