Google horizontal scroll for desktop (ReactJS)

useHorizontalScroll.ts

import { useEffect, useRef, useId } from "react";

const useHorizontalScroll = <RT extends HTMLElement>(scrollSpeed = 1) => {
  const ref = useRef<RT | null>(null);
  const scrollClassName = useId();
  const grabbingClassName = useId();
  const css = `.${scrollClassName}{overflow-x:auto;cursor:grab}
               .${grabbingClassName}{cursor:grabbing}
               .${scrollClassName} img{pointer-events:none}
               .${scrollClassName} *{user-select:none}`;

  useEffect(() => {
    const horizWrapper = ref?.current;
    if (horizWrapper) {
      horizWrapper.classList?.add(scrollClassName);
      const style = document.createElement("style");
      style.textContent = css;
      horizWrapper.appendChild(style);

      let isDown = false;
      let startX: number;
      let scrollLeft: number;
      const mouseDown = (e: any) => {
        isDown = true;
        horizWrapper.classList?.add(grabbingClassName);
        startX = e.pageX - horizWrapper?.offsetLeft;
        scrollLeft = horizWrapper?.scrollLeft;
      };
      horizWrapper.addEventListener("mousedown", mouseDown);

      const mouseLeave = () => {
        isDown = false;
        horizWrapper.classList?.remove(grabbingClassName);
      };
      horizWrapper.addEventListener("mouseleave", mouseLeave);
      horizWrapper.addEventListener("mouseup", mouseLeave);

      const mouseMove = (e: any) => {
        if (!isDown) return;
        e.preventDefault();
        const x = e.pageX - horizWrapper?.offsetLeft;
        const walk = (x - startX) * scrollSpeed;

        horizWrapper.scrollLeft = scrollLeft - walk;
      };
      horizWrapper.addEventListener("mousemove", mouseMove);

      return () => {
        horizWrapper.removeEventListener("mousedown", mouseDown);
        horizWrapper.removeEventListener("mouseleave", mouseLeave);
        horizWrapper.removeEventListener("mouseup", mouseLeave);
        horizWrapper.removeEventListener("mousemove", mouseMove);
      };
    }
  }, [scrollClassName, scrollSpeed]);

  return ref;
};

export { useHorizontalScroll };