title: Couldn't find draggable element with id using react-beautiful-dnd
body: <p>I have been trying to implement a drag and drop functionality using the react-beautiful-dnd library.
  I am displaying some buttons from the initial state of redux and trying to make those items draggable.
  But, for some reasons,I am having an error in console saying that &quot;Unable to find draggable element with id: &quot; when trying to move the button elements. This is for the first time,I am trying to implement such functionalities and not sure where I have done the mistake. I know that the <code>Droppable</code> wrapper should have a <code>droppableId</code> but based on the structure of my state data, how can I pass the id?
  Here is my, ListItems components that I have modified to use the drag and drop logic:</p>
  <pre><code>import React from &quot;react&quot;;
  import { connect } from &quot;react-redux&quot;;
  import { DragDropContext, Droppable, Draggable } from &quot;react-beautiful-dnd&quot;;
  const ListItems = props =&gt; {
    const onDragEnd = result =&gt; {
      console.log(&quot;drag end&quot;);
    };
    return (
      &lt;DragDropContext onDragEnd={onDragEnd}&gt;
        &lt;div&gt;
          List Items
          &lt;Droppable&gt;
            {provided =&gt; (
              &lt;div innerRef={provided.innerRef} {...provided.droppableProps}&gt;
                {props.items.map((item, index) =&gt; (
                  &lt;Draggable key={item.id} draggableId={item.id} index={index}&gt;
                    {provided =&gt; (
                      &lt;div
                        className=&quot;user-lists&quot;
                        key={item.id}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        innerRef={provided.innerRef}
                      &gt;
                        &lt;button&gt;{item.name}&lt;/button&gt;
                      &lt;/div&gt;
                    )}
                  &lt;/Draggable&gt;
                ))}
                {provided.placeholder}
              &lt;/div&gt;
            )}
          &lt;/Droppable&gt;
        &lt;/div&gt;
      &lt;/DragDropContext&gt;
    );
  };
  const mapStateToProps = state =&gt; ({
    items: state.items.buttons
  });
  export default connect(
    mapStateToProps,
    {}
  )(ListItems);
  </code></pre>
  <p>and then the ListItems component is used in App component.</p>
  <p>For complete demo here is the sandbox link:</p>
  <p><a href="https://codesandbox.io/s/adoring-jones-roswh?file=/src/components/ListItems.js:0-1298" rel="nofollow noreferrer">https://codesandbox.io/s/adoring-jones-roswh?file=/src/components/ListItems.js:0-1298</a></p>
  <p>So, I fixed that problem and draggbale is working accordingly. But, now the problem is that I can't move the item by clicking or selecting the button elements rather I need to drag the button from the right side. probably because of the div element that wraps the buttons are handling the dragging. Any fixes to make the buttons draggable, would be nice..</p>