Confused by context updating in handleOnMouseDown()

const Draggable: VoidComponent<{ id: string }> = (props) => {
  const dragContext = useDragContext();

  const handleMouseUp = () => {
    document.removeEventListener("mousemove", dragContext.handleDrag);
    document.removeEventListener("mouseup", handleMouseUp);
  };

  const handleMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (e) => {
    e.preventDefault();
    if (!dragContext.state.selectedElementIds.includes(props.id)) {
      dragContext.selectElement(props.id);
    } else {
      dragContext.unSelectElement(props.id);
    }

    dragContext.setDragStartMousePosition({ x: e.clientX, y: e.clientY });
    dragContext.setDragStartPositions();

    document.addEventListener("mousemove", dragContext.handleDrag);
    document.addEventListener("mouseup", handleMouseUp);
  };

  return (
    <div
      style={{
        top: `${dragContext.state.elements[props.id].position.y}px`,
        left: `${dragContext.state.elements[props.id].position.x}px`,
      }}
      classList={{
        "fixed h-40 w-40 rounded bg-blue3": true,
        "border-4 border-orange6":
          !!dragContext.state.selectedElementIds.includes(props.id),
      }}
      onMouseDown={handleMouseDown}
    />
  );
};