title: How to bacth multiple react-dnd ConnectDragPreviews into a single function / apply multiple ConnectDragPreviews to a single element?
body: <p>I need one entity to simultaneously serve as a <code>dragSource</code> and <code>dragPreview</code> for a dnd entity, as well as a <code>dragPreview</code> for a second entity.</p>
  <p>The only way I know to do it is creating a separate div wrapper for each connector:</p>
  <pre class="lang-js prettyprint-override"><code>// This code works, but it's ugly
  
  type Props = {
    connectDragSource: ConnectDragSource
    connectDragPreview1: ConnectDragPreview
    connectDragPreview2: ConnectDragPreview
  }
  
  const Component: FC&lt;Props&gt; = ({
    connectDragSource,
    connectDragPreview1,
    connectDragPreview2,
    children
  }) =&gt; {
    return (
      &lt;div ref={connectDragPreview1}&gt;
        &lt;div ref={connectDragPreview2}&gt;
          &lt;div ref={connectDragSource}&gt;
            {children}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>I would love to be able to batch all of those connectors into a single <code>ref</code> callback and apply them to a single div:</p>
  <pre class="lang-js prettyprint-override"><code>const Component: FC&lt;Props&gt; = ({
    connectDragSource,
    connectDragPreview1,
    connectDragPreview2,
    children
  }) =&gt; {
    // The goal is to create this function much higher the hierarchy
    // and pass it down as a single function
    const doAllTheConnecting = (ref: any) =&gt; {
      connectDragSource(ref)
      connectDragPreview1(ref)
      connectDragPreview2(ref)
    }
  
    return (
      &lt;div ref={doAllTheConnecting}&gt;
       {children}
      &lt;/div&gt;
    )
  }
  
  </code></pre>
  <p>But this code doesn't work - the previews don't bind correctly. Is there a way to do this?</p>
  <p>I need to do this as a workaround to <a href="https://stackoverflow.com/q/71515728/10467064">this problem</a> - since I cannot have multiple drag sources for one entity, I made two entities that share a drag preview (which also serves as a drag source).</p>