Google horizontal scroll for desktop (ReactJS)

useHorizontalScroll.ts

import { useEffect } from 'react';
import type { MutableRefObject } from 'react';

const useHorizontalScroll = (
  scrollWrapperRef?: MutableRefObject<HTMLElement | undefined>,
  scrollSpeed = 1
): void => {
  useEffect(() => {
    const horizWrapper = scrollWrapperRef?.current;
    if (horizWrapper?.style) {
      horizWrapper.style.overflow = 'auto';
      horizWrapper.style.flexShrink = '0';
    }
    let isDown = false;
    let startX: number;
    let scrollLeft: number;
    horizWrapper?.addEventListener('mousedown', (e: any) => {
      isDown = true;
      startX = e.pageX - horizWrapper?.offsetLeft;
      scrollLeft = horizWrapper?.scrollLeft;
    });
    horizWrapper?.addEventListener('mouseleave', () => {
      isDown = false;
    });
    horizWrapper?.addEventListener('mouseup', () => {
      isDown = false;
    });
    horizWrapper?.addEventListener('mousemove', (e: any) => {
      if (!isDown) return;
      e.preventDefault();
      const x = e.pageX - horizWrapper?.offsetLeft;
      const walk = (x - startX) * scrollSpeed;

      horizWrapper.scrollLeft = scrollLeft - walk;
    });
  }, [scrollSpeed, scrollWrapperRef]);
};

export default useHorizontalScroll;