Start a React Draggable drag programmatically

I'm trying to use the ReactJS Draggable component to implement a drag and drop effect across stacking contexts. My original inspiration was this CodePen example. This is not React, of course, but I'm trying to use the basic strategy of creating a DOM element outside of the scrollable div, then positioning it over the drag start location when the drag starts. This is more or less working, but the last piece I can't work out is transferring the drag start event, which is triggered by a mouse move event on a component inside a scrolling div, to my draggable element, which is placed outside the scrolling div.

Here's the draggable element definition:

      <Draggable 
          position={props.dragState.position}
          onDrag={onDrag}
          onStop={dragStop}
          ref={draggableRef}>
          <div ref={draggedElementRef} 
          style={{
            zIndex: 1000,
            visibility: { isVisible },
            display: "inline-block",
            backgroundColor: "white",
            padding: 10
          }}>
          {props.dragState.dragText}
        </div>
      </Draggable>

and here's where I'm trying to trigger a drag, which is not working:

    if(props.dragState.dragging) {
      if(!draggingNow){
        setDraggingNow(true);
        console.log("TRANSFER DRAG EVENT HERE");
        draggableRef.current.onDragStart(
          props.dragState.startDragEvent, {
            node: draggedElementRef.current,
            x: props.dragState.position.x,
            y: props.dragState.position.y,
            deltaX: 0,
            deltaY: 0,
            lastX: props.dragState.position.x,
            lastY: props.dragState.position.y
          });
      }
    } else {
      if(draggingNow){
        setDraggingNow(false);
      }
    }

In the 2nd block props.dragState.startDragEvent is currently just a reference to the onMouseMove event that was received by the component that triggers the drag action.