Как убрать переворот изображения при масштабировании React JS?

У меня есть компонент диаграмма, размер которого я увеличиваю и уменьшаю. Когда размер становится максимально маленьким, диаграмма переворачивается и обратно увеличивается. Не могу понять, почему это происходит и как устранить эту проблему.

export const Diagram = () => {
const [areaPosition, setAreaPosition] = useState({
        x: 0,
        y: 0,
        scale: 1
    });
const updateXarrow = useXarrow();

    const onMouseWheelZoom = (event) => {
        updateXarrow();
        event.preventDefault();
        const factor = 0.5;
        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,
        });
    };
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>
    );
};

Как отредактировать функцию onMouseWheelZoom, чтобы не было этого поворота?