title: Cannot read property 'map' of undefined when creating drag and drop cards
body: <p>I use the library: <a href="https://github.com/clauderic/react-sortable-hoc" rel="nofollow noreferrer">https://github.com/clauderic/react-sortable-hoc</a></p>
  
  <p>I'm trying to achieve this effect: <a href="https://imgur.com/AIpA720" rel="nofollow noreferrer">https://imgur.com/AIpA720</a></p>
  
  <p>Demo here: <a href="https://stackblitz.com/edit/react-r7hzxk" rel="nofollow noreferrer">https://stackblitz.com/edit/react-r7hzxk</a></p>
  
  <p>I move <code>this.state.item ['lists']</code> to the component <code>SortableList</code>. In the component <code>SortableList</code> wants to iterate <code>items.listItems.map</code> but I have error: </p>
  
  <blockquote>
    <p>Cannot read property 'map' of undefined</p>
  </blockquote>
  
  <pre><code>import {SortableContainer, SortableElement} from 'react-sortable-hoc';
  import arrayMove from 'array-move';
  
  
  const SortableItem = SortableElement(({value}) =&gt; &lt;li&gt;{value}&lt;/li&gt;);
  
  const SortableList = SortableContainer(({items}) =&gt; {
    return (
      &lt;ul&gt;
        {items.listItems.map((value, index) =&gt; (
          &lt;SortableItem key={`item-${value.id}`} index={index} value={value.id} /&gt;
        ))}
      &lt;/ul&gt;
    );
  });
  
  class App extends Component {
    constructor() {
      super();
      this.state = {
         item: {
          id: "abc123",
          name: "AAA",
          lists: [
            {
              id: "def456", 
              list_id: "654wer",
              title: 'List1',
              desc: "description",
              listItems: [
                {
                  id: "ghj678", 
                  title: "ListItems1",
                  listItemsId: "88abf1"
                },
                {
                  id: "poi098", 
                  title: "ListItems2",
                  listItemsId: "2a49f25"
                }
              ]   
            },
            {
              id: "1ef456", 
              list_id: "654wer",
              title: 'List 2',
              desc: "description",
              listItems: [
                {
                  id: "1hj678", 
                  title: "ListItems3",
                  listItemsId: "18abf1"
                },
                {
                  id: "1oi098", 
                  title: "ListItems4",
                  listItemsId: "1a49f25"
                }
              ]   
            },
            {
              id: "2ef456", 
              title: 'List 3',
              list_id: "254wer",
              desc: "description",
              listItems: [
                {
                  id: "2hj678", 
                  title: "ListItems5",
                  listItemsId: "28abf1"
                },
                {
                  id: "2oi098", 
                  title: "ListItems6",
                  listItemsId: "234a49f25"
                }
              ]   
            }
          ]
        }
      };
    }
  
    onSortEnd = ({oldIndex, newIndex}) =&gt; {
      this.setState(({lists}) =&gt; ({
        lists: arrayMove(lists, oldIndex, newIndex),
      }));
    };
  
     render() {
       return &lt;SortableList items={this.state.item['lists']} onSortEnd={this.onSortEnd} /&gt;;
    }
  }
  </code></pre>