Как выделять фрагмент изображения мышкой?

function Canvas() {
 
  const canvasRef = useRef(null);
  const [ctx, setCtx] = useState(null);
  const [right, setRight] = useState(0);
  const [bottom, setBottom] = useState(0);
  const [left, setLeft] = useState(-1);
  const [top, setTop] = useState(-1);
 
  function setMouseEvent(event) {
    console.log('push');
    if (ctx != null) {
      ctx.clearRect(0, 0, 1200, 1000);
    }
    setLeft(event.x);
    setTop(event.y);
    event.target.addEventListener('mousemove', getCoordinates)
  }
 
  function removeMouseEvent(event) {
    console.log('unpush');
    event.target.removeEventListener('mousemove', getCoordinates)
  }
 
  function getCoordinates(event) {
    setRight(event.x);
    setBottom(event.y);
  }
 
  useEffect(() => {
    setCtx(canvasRef.current.getContext('2d'));
    canvasRef.current.addEventListener('mousedown', setMouseEvent)
    canvasRef.current.addEventListener('mouseup', removeMouseEvent)
  }, []);
 
  useEffect(() => {
    console.log(right, bottom);
    console.log(ctx);
    if (ctx != null) {
      ctx.clearRect(0, 0, 1200, 1000)
      ctx.rect(left, top, right - left, bottom - top);
      ctx.stroke();
    }
  }, [right, bottom]);
 
  return (
    <canvas className='canvas' ref={canvasRef} width='1200' height='1000'></canvas>
  );
}
 
export default Canvas;

function App() {
 
  const [isPopupOpen, setIsPopupOpen] = useState(false);
 
  function getSelectedData() {
    setIsPopupOpen(true);
  }
 
  function closePopUp() {
    setIsPopupOpen(false);
  }
 
  return (
    <main className='main'>
      <div className='main__container'>
        <img className='main__image' src={image} alt='Изображение с объектом'></img>
        <Canvas></Canvas>
      </div>
      <button className='button' type="button"  onClick={getSelectedData}>Добавить</button>
      <Popup isOpen={isPopupOpen} onClose={closePopUp}></Popup>
    </main>
  );
}
 
export default App;