TypeScript React hook for drag'n'drop on elements

drag-n-drop-hook.ts

import { useState } from "react";

export const useDragAndDrop = <T extends HTMLElement>() => {
  const [isDragging, setIsDragging] = useState(false);
  const [innerOffsetX, setInnerOffsetX] = useState(0);
  const [innerOffsetY, setInnerOffsetY] = useState(0);

  const start = (event: React.MouseEvent<T, MouseEvent>) => {
    const element = event.target as T;
    const { left, top } = element.getBoundingClientRect();
    const { clientX, clientY } = event;

    setInnerOffsetX(left - clientX);
    setInnerOffsetY(top - clientY);

    setIsDragging(true);
  };

  const drag = (event: React.MouseEvent<T, MouseEvent>) => {
    if (isDragging) {
      const x = event.clientX + innerOffsetX;
      const y = event.clientY + innerOffsetY;
      const element = event.target as T;

      element.style.left = `${x}px`;
      element.style.top = `${y}px`;
    }
  };

  const end = () => {
    setIsDragging(false);
  };

  return [
    start,
    drag,
    end,
  ];
};