title: Invariant failed: Cannot collect without a droppable ref
body: <p>I am trying to implement <code>react-beautiful-dnd</code>. They have a video guide which I've followed, and double checked and compared my code to the one in the video multiple times, yet I keep getting this error.</p>
  
  <p>I will post my code here, but I have also set up a sandbox over here:</p>
  
  <p><a href="https://codesandbox.io/s/xenodochial-euclid-m5sfk?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/s/xenodochial-euclid-m5sfk?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>
  
  <p>I am trying to set up a simple implementation of the <code>react-beautiful-dnd</code>. I have 4 files. The index, the column and a single item (referred to as task in my code as this is a to-do app):</p>
  
  <p>Index:</p>
  
  <pre><code>import React, { Component } from "react";
  import ReactDOM from "react-dom";
  import "@atlaskit/css-reset";
  import { DragDropContext } from "react-beautiful-dnd";
  import initialData from "./initial-data";
  import Column from "./column";
  
  class App extends Component {
    state = initialData;
  
    onDragEnd = result =&gt; {
      console.log("drag ended");
      // TODO reorder our column
    };
  
    render() {
      return (
        &lt;DragDropContext onDragEnd={this.onDragEnd}&gt;
          {this.state.columnOrder.map(columnId =&gt; {
            const column = this.state.columns[columnId];
            const tasks = column.taskIds.map(taskId =&gt; this.state.tasks[taskId]);
  
            return &lt;Column key={column.id} column={column} tasks={tasks} /&gt;;
          })}
        &lt;/DragDropContext&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p>Column.jsx:</p>
  
  <pre><code>import React, { Component } from "react";
  import styled from "styled-components";
  import { Droppable } from "react-beautiful-dnd";
  
  import Task from "./task";
  
  const Container = styled.div`
    margin: 8px;
    border: 1px solid lightgrey;
    border-radius: 2px;
  `;
  const Title = styled.h3`
    padding: 8px;
  `;
  const TaskList = styled.div`
    padding: 8px;
  `;
  
  export default class Column extends Component {
    render() {
      return (
        &lt;Container&gt;
          &lt;Title&gt;{this.props.column.title}&lt;/Title&gt;
          &lt;Droppable droppableId={this.props.column.id}&gt;
            {provided =&gt; (
              &lt;TaskList
               innerRef={provided.innerRef}
                {...provided.droppableProps}
                 &gt;
                {this.props.tasks.map((task, index) =&gt; (
                  &lt;Task key={task.id} task={task} index={index} /&gt;
                ))}
                {provided.placeholder}
              &lt;/TaskList&gt;
            )}
          &lt;/Droppable&gt;
        &lt;/Container&gt;
      );
    }
  }
  </code></pre>
  
  <p>Task.jsx:</p>
  
  <pre><code>import React, { Component } from "react";
  import styled from "styled-components";
  import { Draggable } from "react-beautiful-dnd";
  
  const Container = styled.div`
    border: 1px solid lightgrey;
    border-radius: 2px;
    padding: 8px;
    margin-bottom: 8px;
    background-color: white;
  `;
  
  export default class Task extends Component {
    render() {
      return (
        &lt;Draggable draggableId={this.props.task.id} index={this.props.index}&gt;
          {provided =&gt; (
            &lt;Container
              {...provided.draggableProps}
              {...provided.dragHandleProps}
              innerRef={provided.innerRef}
            &gt;
              {this.props.task.content}
            &lt;/Container&gt;
          )}
        &lt;/Draggable&gt;
      );
    }
  }
  </code></pre>
  
  <p>initial data:</p>
  
  <pre><code>const initialData = {
    tasks: {
      "task-1": { id: "task-1", content: "Take out the garbage" },
      "task-2": { id: "task-2", content: "Watch my favorte show" },
      "task-3": { id: "task-3", content: "Charge my phone" },
      "task-4": { id: "task-4", content: "Cook dinner" }
    },
    columns: {
      "column-1": {
        id: "column-1",
        title: "To Do",
        taskIds: ["task-1", "task-2", "task-3", "task-4"]
      }
    },
    columnOrder: ["column-1"]
  };
  
  export default initialData;
  </code></pre>
  
  <p>It has something to do with the innerRef I think, but can't understand what it is I am doing differently</p>