为什么sortablejs组件无法正确呈现

Question

我正在尝试遵循在React中使用SortableJs插件的教程，并且该组件呈现无错误但呈现不正确，它仅呈现无样式或功能的纯无序列表。

我尝试卸载软件包，然后再次安装它们，但是它也无法正常工作。

这是它的呈现方式： screenshot of the rendered component

这是我的代码：

import Sortable from "react-sortablejs";

class BannersForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ["Apple", "Banana", "Cherry", "Guava", "Peach", "Strawberry"]
    };
  }

  render() {
    const items = this.state.items.map(val => <li data-id={val}>{val}</li>);

    return (
      <div>
        <Sortable
          tag="ul" // Defaults to "div"
        >
          {items}
        </Sortable>
      </div>
    );
  }
}

export default BannersForm;

这是我的package.json

{
  "name": "website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "font-awesome": "^4.7.0",
    "history": "^4.9.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "react-sortablejs": "^1.5.1",
    "sortablejs": "^1.6.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

它假定呈现一个可以拖动以进行排序的列表。