I need to add drag feature to my component for scroll vertically but I don't want to use additional libraries. from this source which is tutorial for horizontal implementation that I follow for vertical mode but it doesn't work. here's my implementation so far:

    const [thumbnailScroll, setThumbnailScroll] = useState({isScrolling: false, clientY: 0, scrollY: 0});
    const thumbnailRef = useRef();

    const mouseDownHandler = useCallback((e) => {
        console.log(e.clientY);
        thumbnailRef.current.style.cursor = 'grabbing';
        thumbnailRef.current.style.userSelect = 'none';

        setThumbnailScroll((prev) => ({...prev, isScrolling: true, clientY: e.clientY}));
    }, []);

    const mouseMoveHandler = useCallback(
        (e) => {
            const {clientY, scrollY, isScrolling} = thumbnailScroll;
            if (isScrolling) {
                thumbnailRef.current.scrollTop = scrollY + e.clientY - clientY;
                setThumbnailScroll((prev) => ({...prev, scrollY: scrollY + e.clientY - clientY, clientY: e.clientY}));
            }
        },
        [thumbnailScroll],
    );

    const mouseUpHandler = useCallback(() => {
        setThumbnailScroll((prev) => ({...prev, isScrolling: false}));
        thumbnailRef.current.style.cursor = 'default';
    }, []);


return (
                <div className={styles.carouselContainer}>
                    <div
                        className={styles.thumbnailContainer}
                        ref={thumbnailRef}
                        onMouseDown={mouseDownHandler}
                        onDragStart={mouseMoveHandler}
                        onMouseUp={mouseUpHandler}
                    >
                        {renderCarouselThumbnails}
                    </div>
                </div>
    );

and here is the styles:

.carouselContainer {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;

            .thumbnailContainer {
                background-color: red;
                height: 100%;
                width: 20%;
                display: flex;
                align-items: center;
                flex-direction: column;
                -ms-overflow-style: none;  /* Internet Explorer 10+ */
                scrollbar-width: none;
                cursor: grab;
                overflow: auto;

                &::-webkit-scrollbar {
                    display: none;  /* Safari and Chrome */
                }

                .thumbnailImage {
                    display: inline-block;
                    width: 80px;
                    height: 60px;
                    margin-bottom: 2rem;
                }
            }
        }

the problem is it doesn't work as expected. how can I achieve this?