title: react-beautiful-dnd: Cannot find drag handle element inside of Draggable
body: <p>I have a component that receives two sets of data and is a 
  <a href="https://github.com/atlassian/react-beautiful-dnd" rel="nofollow noreferrer">react-beautiful-dnd</a> <code>DragDropContext</code> as below</p>
  
  <pre><code> render() {
      let index = -1;
      const dataSetOne = this.props.store!.getdata(1);
      const dataSetTwo = this.props.store!.getData(2);
      const allData = this.props.anotherStore!.getAllData();
  
      return (
          &lt;DragDropContext onDragEnd={this.onDragEnd}&gt;
            &lt;Droppable droppableId="SIDE_MENU" direction="vertical" type="sections"&gt;
              {(provided, snapshot) =&gt; (
                &lt;div
                  {...provided.droppableProps}
                  ref={provided.innerRef}
                  onScroll={(e) =&gt; e.currentTarget.scrollTop}
                &gt;
                  {dataSetOne!.map((a, i) =&gt; {
                    index = i;
                    const currentData:any= allData.filter(/*logic*/)
                    return (
                      &lt;MyDraggableComp
                        key={a.id!}
                        aes={a}
                        index={index}
                        data={currentData}
                      /&gt;
                    );
                  })}
                 {dataSetTwo.length &gt; 0 ? (
                  &lt;MyDraggableComp
                    key="SOMEKEY"
                    aes={null}
                    index={index + 1}
                    data={dataSetTwo}
                  /&gt;
                  ) : null}
                  {provided.placeholder}
                &lt;/div&gt;
              )}
            &lt;/Droppable&gt;
          &lt;/DragDropContext&gt;
      );
    }
  </code></pre>
  
  <p>up to now, this code is working perfectly and The <code>MyDraggableComp</code> is implemented correctly regarding the dnd implementation guideline and contains the <code>{...sectionProvided.dragHandleProps}</code></p>
  
  <p>now have changed backend and <code>dataSetTwo</code> is never null or empty so wanted to remove the condition and always render it.</p>
  
  <p>but moving the <code>dataSetTwo&gt;0</code> condition and just have </p>
  
  <pre><code>            &lt;MyDraggableComp
                key="SOMEKEY"
                aes={null}
                index={index + 1}
                data={dataSetTwo}
              /&gt;
  </code></pre>
  
  <p><strong><em>causes this error that I do not even understand the relation to the case and what to search for? can someone explain to me what is happening and how to fix it?</em></strong></p>
  
  <pre><code>Error: Invariant failed: 
        Cannot find drag handle element inside of Draggable.
        Please be sure to apply the {...provided.dragHandleProps} to your Draggable
  
        More information: https://github.com/atlassian/react-beautiful-dnd#draggable
  
  ▼ 21 stack frames were expanded.
  invariant
  node_modules/tiny-invariant/dist/tiny-invariant.esm.js:11
  getDragHandleRef
  node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js:6165
  DragHandle.componentDidMount
  node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js:7351
  commitLifeCycles
  node_modules/react-dom/cjs/react-dom.development.js:15961
  commitAllLifeCycles
  node_modules/react-dom/cjs/react-dom.development.js:17262
  HTMLUnknownElement.callCallback
  node_modules/react-dom/cjs/react-dom.development.js:149
  invokeGuardedCallbackDev
  node_modules/react-dom/cjs/react-dom.development.js:199
  invokeGuardedCallback
  node_modules/react-dom/cjs/react-dom.development.js:256
  commitRoot
  node_modules/react-dom/cjs/react-dom.development.js:17458
  completeRoot
  node_modules/react-dom/cjs/react-dom.development.js:18912
  performWorkOnRoot
  node_modules/react-dom/cjs/react-dom.development.js:18841
  performWork
  node_modules/react-dom/cjs/react-dom.development.js:18749
  performSyncWork
  node_modules/react-dom/cjs/react-dom.development.js:18723
  batchedUpdates$1
  node_modules/react-dom/cjs/react-dom.development.js:18936
  reactionScheduler
  node_modules/mobx/lib/mobx.module.js:3626
  runReactions
  node_modules/mobx/lib/mobx.module.js:3602
  .
  .
  .
  </code></pre>