React-dnd: 参照を渡すと、並べ替え可能な例が機能しません

例は次のとおりです。

return connectDragSource(connectDropTarget(
      <div style={{ ...style, opacity }}>
        {text}
      </div>
    ));

ただし、次の場合は、別の接続方法を使用します。たとえば、参照を渡す（ styled-componentsを使用しているためinnerRefを使用します）。

return (
      <MyElement 
        innerRef={instance => connectDragSource(connectDropTarget(findDOMNode(instance)))}
        style={{ ...style, opacity }}
      >
        {text}
      </MyElement>
);

内部呼び出しのみが機能します（この場合、 connectDropTargetですが、 connectDropTargetとconnectDragSourceを交換すると、 connectDragSourceが機能します）。

ただし、これは機能します。

return (
      <MyElement 
        innerRef={instance => {
          const domNode = findDOMNode(instance)
          connectDragSource(domNode)
          connectDropTarget(domNode)
        }}
        style={{ ...style, opacity }}
      >
        {text}
      </MyElement>
);

理由は何ですか？