added drag scroll to an item

useDragScrolling.ts

import { useEffect } from 'react';
import { addStylesToHtml } from 'shared/ui/addStyles';

const createGrabbingStyles = () => {
  const style = document.createElement('style');
  style.textContent = `
  .useDragScrolling.grabbing {
    scroll-behavior: auto;
    cursor: grabbing;
  }
  `;
  return style;
};

type Props = { querySelector: string; itemIsMounted: boolean };
export const useDragScrolling = ({ querySelector, itemIsMounted }: Props) => {
  useEffect(() => {
    const style = createGrabbingStyles();
    addStylesToHtml(style);

    return () => {
      style.remove();
    };
  }, []);

  useEffect(() => {
    if (!itemIsMounted) {
      return;
    }

    const list = document.querySelector(querySelector);
    if (!list) {
      return;
    }

    let pos = { top: 0, left: 0, x: 0, y: 0 };

    const mouseMoveHandler = (e) => {
      const dx = e.clientX - pos.x;
      const dy = e.clientY - pos.y;
      list.scrollTop = pos.top - dy;
      list.scrollLeft = pos.left - dx;
    };

    const mouseUpHandler = () => {
      list.classList.remove('grabbing');
      list.classList.remove('useDragScrolling');

      document.removeEventListener('mousemove', mouseMoveHandler);
      document.removeEventListener('mouseup', mouseUpHandler);
    };

    const mouseDownHandler = (e) => {
      list.classList.add('useDragScrolling');
      list.classList.add('grabbing');
      pos = {
        left: list.scrollLeft,
        top: list.scrollTop,
        x: e.clientX,
        y: e.clientY,
      };

      document.addEventListener('mousemove', mouseMoveHandler);
      document.addEventListener('mouseup', mouseUpHandler);
    };

    list.addEventListener('mousedown', mouseDownHandler);
    return () => {
      list.removeEventListener('mousedown', mouseDownHandler);
    };
  }, [itemIsMounted, querySelector]);

  return {};
};