React-beautiful-dnd: Uncaught TypeError: Cannot read property 'id' of undefined

[crapthings]

https://www.webpackbin.com/bins/-Ky49JkG6XfMtOMS_gAM

i'm trying to learn this beautiful module, but something wrong when i start drag

import React, { Component } from 'react'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'

export default class Layout extends Component {
  onDragStart = item => {
    console.log(item)
  }

  onDragEnd = item => {
    console.log(item)
  }

  render () {
    const { children } = this.props
    return (
      <DragDropContext onDragStart={this.onDragStart} onDragEnd={this.onDragEnd}>
        <Droppable droppableId='root' type='ROOT'>
          {(provided, snapshot) => <div ref={provided.innerRef} style={{ backgroundColor: snapshot.isDraggingOver ? 'green' : 'grey' }}>
            <Draggable draggableId="draggable-1">
              {(provided, snapshot) => (
                <div>
                  <div
                    ref={provided.innerRef}
                    style={provided.draggableStyle}
                    {...provided.dragHandleProps}
                  >
                    Drag me! 1
                  </div>
                  {provided.placeholder}
                </div>
              )}
            </Draggable>

            <Draggable draggableId="draggable-2">
              {(provided, snapshot) => (
                <div>
                  <div
                    ref={provided.innerRef}
                    style={provided.draggableStyle}
                    {...provided.dragHandleProps}
                  >
                    Drag me! 2
                  </div>
                  {provided.placeholder}
                </div>
              )}
            </Draggable>
            {provided.placeholder}
          </div>}
        </Droppable>
      </DragDropContext>
    )
  }
}

it told me droppable is undefined

exports.default = (0, _memoizeOne2.default)(function (droppable, draggables) {                                         // 17
  return (0, _keys2.default)(draggables).map(function (id) {                                                           // 18
    return draggables[id];                                                                                             // 19
  }).filter(function (draggable) {                                                                                     // 20
    return droppable.id === draggable.droppableId;                                                                     // 21
  }).sort(function (a, b) {                                                                                            // 22
    return a.page.withoutMargin.center[droppable.axis.line] - b.page.withoutMargin.center[droppable.axis.line];        // 23
  });                                                                                                                  // 24
});              

[alexreardon]

If you add a type to the Droppable then you also need to add the same type to the Draggable. In this case type="root". This would error would have been easier to see if #25 was implemented