у меня есть вот такой код 
import { useCallback, useEffect, useRef, useState } from 'react';
import { Button } from 'primereact/button';
import { useStageInteractionContext } from '../hooks/useStageInteractionContext';
import { useDocumentContext } from '../hooks/useDocumentContext';
import { Page } from '../models/pages/page';
import { Carousel } from 'primereact/carousel';
import { Dropdown } from 'primereact/dropdown';
import { DivId, zoomScale } from '../constants';
import { AutoComplete } from 'primereact/autocomplete';
import { Subject } from 'rxjs';
import { Actions } from '../enums/actions';
import { useSelectionStore } from '../store';

const Zoom = () => {
  const stageInteraction = useStageInteractionContext();

  const [zoomConstants, setZoomConstants] = useState([...zoomScale]);

  const setNewScale = (scale: number) => {
    if (scale >= 30 && scale <= 300) {
      stageInteraction.setZoom(scale);
    }
  };

  const getZoomOptions = () => {
    setZoomConstants([...zoomScale]);
  };

  return (
    <>
      <div className='mr-2 text-color-secondary flex flex-row gap-2'>
        <div className={'block'}>Масштаб</div>
        <div className={'scale-dropdown'}>
          <AutoComplete
            value={parseInt(String(stageInteraction.scale * 100), 10)}
            suggestions={zoomConstants}
            completeMethod={getZoomOptions}
            onChange={(e) => setNewScale(e.value)}
            className='p-0 border-none border-noround text-color-secondary'
            dropdownIcon='pi pi-chevron-up'
            dropdown
          />
        </div>
        <div>%</div>
      </div>
      <div className='border-x-1 border-gray-300'>
        <Button
          icon='pi pi-minus'
          onClick={() => stageInteraction.handleZoom(1)}
          tooltip='Уменьшить масштаб'
          tooltipOptions={{ showDelay: 1000, hideDelay: 300, position: 'top' }}
          outlined
          className='border-none text-color-secondary'
        />
      </div>
      <div className='border-right-1 border-gray-300'>
        <Button
          icon='pi pi-plus'
          onClick={() => stageInteraction.handleZoom(0)}
          tooltip='Увеличить масштаб'
          tooltipOptions={{ showDelay: 1000, hideDelay: 300, position: 'top' }}
          outlined
          className='border-none text-color-secondary'
        />
      </div>
    </>
  );
};

interface PagesListProps {
  actionSource: Subject<{ action: Actions; pageId?: string | number; x?: number; y?: number }>;
}

const PagesList = ({ actionSource }: PagesListProps) => {
  const editorDocument = useDocumentContext();
  const [visiblePagesNumber, setVisiblePagesNumber] = useState<number>(3);
  const selectionStore = useSelectionStore();
  const [previousPagesCount, setPreviousPagesCount] = useState<number>(editorDocument.pages.length);

  const carouselRef = useRef<any>(null);

  /**
   * Устанавливает количество видимых в нижнем баре страниц в зависимости от ширины экрана
   */
  const setupNewVisiblePageNumber = useCallback(() => {
    const screenWidth = window.innerWidth;

    if (!screenWidth) {
      return;
    }
    if (screenWidth > 2000) {
      setVisiblePagesNumber(3);
    } else if (screenWidth > 1800) {
      setVisiblePagesNumber(2);
    } else {
      setVisiblePagesNumber(1);
    }
  }, []);

  useEffect(() => {
    window.addEventListener('resize', setupNewVisiblePageNumber);

    return () => {
      window.removeEventListener('resize', setupNewVisiblePageNumber);
    };
  }, [setupNewVisiblePageNumber]);

  useEffect(() => {
    setupNewVisiblePageNumber();
  }, [setupNewVisiblePageNumber]);

  /**
   * Отслеживает количество страниц и устанавливает активной последнюю после добавления
   */
  useEffect(() => {
    const currentPagesCount = editorDocument.pages.length;

    // Если количество страниц увеличилось
    if (currentPagesCount > previousPagesCount) {
      // Устанавливаем последнюю активной
      const lastPage = editorDocument.pages[currentPagesCount - 1];
      if (lastPage) {
        editorDocument.setActivePage(lastPage);
      }
      setPreviousPagesCount(currentPagesCount);
    }
  }, [editorDocument, editorDocument.pages.length, previousPagesCount]);
  const [activePageIndex, setActivePageIndex] = useState(0);
  /**
   * Прокрутка к активной странице
   */
  useEffect(() => {
    const activeIndex = editorDocument.pages.findIndex((page) => page.id === editorDocument.activePage?.id);

    if (activeIndex >= 0) {
      setActivePageIndex(activeIndex); // Прокручиваем к активной странице
    } else {
      setActivePageIndex(0);
    }
  }, [editorDocument.activePage]); // Зависимость от активной страницы

  useEffect(() => {
    console.log(activePageIndex);
  }, [activePageIndex]);

  const handleOnClick = (page: Page) => {
    editorDocument.setActivePage(page);
    page.id && selectionStore.setSelectedIds([page.id]);
  };

  const pageTemplate = (page: Page) => {
    return (
      <div className='page-button w-8rem h-4rem flex align-items-center justify-content-center overflow-hidden text-overflow-ellipsis'>
        <Button
          key={page.id}
          label={page.name}
          outlined
          className={`${editorDocument.activePage?.id === page.id ? 'underline' : 'p-button-secondary'} border-none font-medium m-2 ml-1 mr-1 text-overflow-ellipsis whitespace-nowrap`}
          onClick={() => handleOnClick(page)}
        />
      </div>
    );
  };

  return (
    <div className='flex flex-row max-w-full' id={DivId.GRAPH_FOOTER_PAGE_LIST}>
      <div className='docs-carousel w-full max-w-30rem overflow-hidden flex align-items-center'>
        <Carousel
          id={DivId.GRAPH_FOOTER_CAROUSEL}
          key={visiblePagesNumber}
          value={Array.from(editorDocument.pages.values())}
          numVisible={visiblePagesNumber}
          numScroll={1}
          itemTemplate={pageTemplate}
          showIndicators={false}
        />
      </div>

      <Button
        id={DivId.GRAPH_FOOTER_ADD_BUTTON}
        icon='pi pi-plus'
        tooltip='Добавить лист'
        tooltipOptions={{ showDelay: 1000, hideDelay: 300, position: 'top' }}
        outlined
        className='mr-2 border-none text-color-secondary my-3'
        onClick={() => actionSource.next({ action: Actions.CreatePage })}
        style={{ minWidth: '25px' }}
      />
    </div>
  );
};

interface FooterToolsProps {
  actionSource: Subject<{ action: Actions; pageId?: string | number; x?: number; y?: number }>;
}

const FooterTools = ({ actionSource }: FooterToolsProps) => {
  const editorDocument = useDocumentContext();

  return (
    <div className='max-w-full flex flex-row align-items-center justify-content-between px-2' id={DivId.GRAPH_FOOTER}>
      <PagesList actionSource={actionSource} />
      <div className='flex align-items-center bg-white max-w-full' id={DivId.GRAPH_FOOTER_ZOOM_N_DROPDOWN}>
        <Zoom />
        <Dropdown
          placeholder='Все'
          pt={{ input: { className: 'py-1  md:max-w-8rem lg:max-w-12rem text-overflow-ellipsis' } }}
          options={Array.from(editorDocument.pages)}
          optionLabel='name'
          value={editorDocument.activePage}
          onChange={(e) => {
            editorDocument.setActivePage(e.value);
          }}
          dropdownIcon='pi pi-chevron-up'
          className='p-0 border-none border-noround text-color-secondary'
        />
      </div>
    </div>
  );
};

export default FooterTools;


как мне промотать карусель до активной вкладки?