React-dnd: Contoh yang dapat diurutkan tidak berfungsi dengan melewati ref

Contohnya adalah:

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

Tetapi menggunakan cara alternatif untuk terhubung, seperti ref yang lewat (menggunakan innerRef karena saya menggunakan styled-components ), jika saya melakukannya:

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

Hanya panggilan dalam yang berfungsi (dalam hal ini, connectDropTarget , tetapi jika saya menukar connectDropTarget dan connectDragSource , maka hanya connectDragSource akan berfungsi).

Ini berfungsi, meskipun:

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

Ada alasan mengapa?