无法在可排序列表中移动项目

Question

我正在尝试在代码中实现可排序列表，但是我面临将项目从一个列表移动或拖动到另一个空列表的问题。我正在使用https://github.com/SortableJS/react-sortablejs库来实现可排序。当我开始将项目移到空白列表时，项目不动。

import random from "lodash/random";
import uniqueId from "lodash/uniqueId";
import uniq from "lodash/uniq";
import React from "react";
import Sortable from "../components/Sortable";

class DragTest extends React.Component {
  state = {
    groupLeft: ["Apple", "Banana", "Cherry", "Grape"],
    //groupRight: ["Lemon", "Orange", "Pear", "Peach"]
    groupRight: []
  };

  render() {
    const groupLeft = this.state.groupLeft.map((val, key) => (
      <div key={uniqueId()} data-id={val}>
        {val}
      </div>
    ));
    const groupRight = this.state.groupRight.map((val, key) => (
      <div key={uniqueId()} data-id={val}>
        {val}
      </div>
    ));

    return (
      <div>
        <div style={{ padding: "20px", border: "1px solid #ccc" }}>
          <Sortable
            options={{
              animation: 150,
              group: {
                name: "shared",
                pull: true,
                put: true
              }
            }}
            className="block-list"
            onChange={items => {
              this.setState({ groupLeft: items });
            }}
          >
            {groupLeft}
          </Sortable>
        </div>
        <div style={{ padding: "20px", border: "1px solid #ccc" }}>
          <Sortable
            options={{
              animation: 150,
              group: {
                name: "shared",
                pull: true,
                put: true
              }
            }}
            className="block-list"
            onChange={items => {
              this.setState({ groupRight: items });
            }}
          >
            {groupRight}
          </Sortable>
        </div>
      </div>
    );
  }
}

export default DragTest;

请检查此代码，让我知道我的代码有什么问题。