Scroll контента удержанием мыши (scroll by dragging) на React JS

Я пыталась использовать в коде библиотеки react-indiana-drag-scroll и dragscroll, но с ними компоненты блока, который должен скроллиться, не отрисовываются. В проекте на экран выводятся большие диаграммы, все их элементы обернуты в Draggable из одноименной библиотеки. Задача в проекте такая: перемещаться по диаграмме нажатой кнопкой мыши и отключить скролл-бары. При этом чтобы сохранялась возможность перетаскивать таблицы диаграммы.

Пыталась использовать в коде эти источники, но компоненты не скроллятся: https://eymas.medium.com/scrolling-by-dragging-react-js-reusable-component-2b79e936b41c https://htmldom.dev/drag-to-scroll/

export const Diagram = () => {
    const [areaPosition, setAreaPosition] = useState({
            x: 100,
            y: 100,
            scale: 1
        });
     const updateXarrow = useXarrow();
    
        const onMouseWheelZoom = (event) => {
            updateXarrow();
            const factor = 0.1;
            const delta = event.deltaY / 120;
            const newScale = areaPosition.scale + delta * factor;
    
            const ratio = 1 - newScale / areaPosition.scale;
            setAreaPosition({
                scale: newScale,
                x: areaPosition.x + (event.clientX - areaPosition.x) * ratio,
                y: areaPosition.y + (event.clientY - areaPosition.y) * ratio
            });
        };
const scrolledElement = document.getElementsByClassName("AreaContainer");
    scrolledElement.scrollTop = 100;
    scrolledElement.scrollLeft = 250;

    let initialPositionToScroll = { top: 0, left: 0, x: 0, y: 0 };

    const onMouseDownScroller = (event) => {
    initialPositionToScroll = {
        left: scrolledElement.scrollLeft,
        top: scrolledElement.scrollTop,
        x: event.clientX,
        y: event.clientY,
    };

    document.addEventListener('mousemove', onMouseMoveScroller);
    document.addEventListener('mouseup', onMouseUpScroller);
    };

    const onMouseMoveScroller = (event) => {
        const dx = event.clientX - initialPositionToScroll.x;
    const dy = event.clientY - initialPositionToScroll.y;
    scrolledElement.scrollTop = initialPositionToScroll.top - dy;
    scrolledElement.scrollLeft = initialPositionToScroll.left - dx;
    };

    const onMouseUpScroller = () => {
        document.removeEventListener('mousemove', onMouseMoveScroller);
    document.removeEventListener('mouseup', onMouseUpScroller);
    };
  
    
    return (
            <div className={styles.MainContainer}>
                <VerticalMenu
                    diagram={diagram}
                    onChangeDiagram={onChangeDiagramHandler}
                    selectedDiagramType={selectedDiagramType}
                    setSelectedDiagramType={setSelectedDiagramType}
                />
                <div
                    className={styles.AreaContainer}
                    onWheelCapture={onMouseWheelZoom}
                >
                    <div className={styles.ClassesContainer}>
                        <Xwrapper>
                            <div
                                style={{
                                    transformOrigin: "0 0",
                                    transform: `translate(${areaPosition.x}px, ${areaPosition.y}px) scale(${areaPosition.scale})`
                                }}
                            >
                                {getTables()}
                            </div>
                            <div className={styles.ArrowContainer}>
                                {getArrows()}
                            </div>
                        </Xwrapper>
                    </div>
                </div>
            </div>
        );
    };

первая функция в коде добавляет масштабирование, код сокращенный, в нем много функционала

.MainContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    position: absolute;
    
}



.AreaContainer {
    display: flex;
    flex-direction: row;
    cursor: grab;
}

.ClassesContainer {
    height: auto;
    z-index: 6;
}

.ArrowContainer {
    z-index: -1;
    position: relative;
}

как можно самостоятельно прописать функцию, чтобы контейнер с таблицами ClassesContainer мог скроллиться? Не нашла ничего подходящего на других ресурсах.