DragContainer.js

import styled from "@emotion/styled";

const DragContainer = styled.div`
  height: 460px;
  max-height: 80vh;
  width: 100%;
  position: relative;
  overflow: hidden;
`;

DragSelection.js

import styled from "@emotion/styled";

const DragSelection = styled.div`
  position: absolute;
  background: rgba(0, 142, 226, 0.1);
  border: 1px solid #008ee2;
  width: 20px;
  height: 20px;
  transform: translate(${({ x }) => x}px, ${({ y }) => y}px);
  width: ${({ width }) => width}px;
  height: ${({ height }) => height}px;
  left: 0;
  top: 0;
`;

export default DragSelection

SelectableContainer.js

import React from 'react';
import useDragSelect from './useDragSelect.js'
import DragSelection from './DragSelection.js'
import DragContainer from './DragContainer.js'

const SelectableContainer = ({ children }) => {
  const [ref, dragPosition] = useDragSelect();

  return (
    <PlotAreaStyle ref={ref} id="plotArea">
      {children}
      {dragPosition && <DragSelection {...dragPosition}></DragSelection>}
    </PlotAreaStyle>
  );
};

export default SelectableContainer

useDragSelect.js

import React from "react";
import useMeasure from "./useMeasure";
import useEventListener from "./useEventListener";

export default function useDragSelect() {
  const [dragPosition, setDragPosition] = React.useState(null);
  const [initialPosition, setInitialPosition] = React.useState(null);
  const [ref, dimensions] = useMeasure();
  
  useEventListener("mousedown", e => {
    if (e.target.id === "plotArea") {
      setInitialPosition({
        x: e.clientX - dimensions.left,
        y: e.clientY - dimensions.top
      });
      setDragPosition({
        x: e.clientX - dimensions.left,
        y: e.clientY - dimensions.top,
        width: 0,
        height: 0
      });
    }
  });
  useEventListener("mouseup", () => {
    setDragPosition(null);
    setInitialPosition(null);
  });
  useEventListener("mousemove", e => {
    if (dragPosition) {
      const position = {
        x:
          e.clientX - dimensions.left < initialPosition.x
            ? e.clientX - dimensions.left
            : initialPosition.x,
        y:
          e.clientY - dimensions.top < initialPosition.y
            ? e.clientY - dimensions.top
            : initialPosition.y,
        width: Math.abs(e.clientX - initialPosition.x - dimensions.left),
        height: Math.abs(e.clientY - initialPosition.y - dimensions.top)
      };
      setDragPosition(position);
    }
  });
  return [ref, dragPosition];
}