Necesito agregar la función de arrastrar a mi componente para desplazarme verticalmente, pero no quiero usar bibliotecas adicionales. de esta fuente, que es un tutorial para la implementación horizontal que sigo para el modo vertical pero no funciona. aquí está mi implementación hasta ahora:

 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> );

y aquí están los estilos:

 .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; } } }

el problema es que no funciona como se esperaba. ¿Cómo puedo conseguir esto?