How to avoid dragging the parent when dragging it's child?

I've added to my React app navigation bar which the user can drag items and replace positions. (Works fine!)

Now I'm trying to render recursively the navigation tree, so inner navigations can be dragged and replaced (no reparenting).

Rendering recursively works fine, but the problem is dragging an inner child causes dragging the whole parent node.

NodeWrapper.js:

export class NodeWrapper extends Component {
  public render() {
    return (
      <DragList onItemMoved={this.props.onItemMoved}>
        {this.props.navItems
          .map((component, index) => (
            <Node key={`node-${index}`} {...component}/>
          ))}
      </DragList>
    );
  }
}

Node.js:

public render() {
 return (
  <div>
    <span>{this.props.label}</span>
    {this.props.childNodes && (
      <NodeWrapper navItems={this.props.childNodes} />
    )}
  </div>
 );
}

*Note, the DragList component is really huge, and I don't think that it's relevant to the question, will add if asked. Basically it renders a list of children with ability to drag them with event handler.

I've tried to add event.stopPropagation() for the drag event handler, but it still captures and drags the whole parent node.

How can I perform drag between all levels?

from How to avoid dragging the parent when dragging it's child?