React-dnd: Nicht erfasster Fehler: Gegenstand muss ein Objekt sein

Hallo. Ich habe versucht, Erwähnungen dieses Fehlers zu finden, aber leider war hier oder im Web nichts vorhanden.

Ich habe ein Projekt gestartet und habe eine ziemlich einfache Einrichtung. Beim Versuch, ein Element zu ziehen, tritt folgender Fehler auf:
http://prntscr.com/jpfale

Dies ist meine Drag-Komponente:

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { DragSource } from 'react-dnd';

const Container = styled.span`
  margin: 10px;
  font-size: 4rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.4s;

  &.is-clicked {
    color: ${({ theme }) => theme.colors.purple};
  }

  &.is-hidden {
    opacity: 0;
  }
`;

const spec = {
  beginDrag(props) {
    console.log('test');
    return {};
  },
};

const WordItem = ({
  children,
  item,
  isHidden,
  handleClick,
  connectDragSource,
}) => {
  return connectDragSource(
    <span>
      <Container
        className={item.clicked ? 'is-clicked' : isHidden}
        onClick={handleClick}
      >
        {children}
      </Container>
    </span>,
  );
};

WordItem.propTypes = {
  children: PropTypes.string.isRequired,
  item: PropTypes.objectOf(PropTypes.any).isRequired,
  isHidden: PropTypes.string.isRequired,
  handleClick: PropTypes.func.isRequired,
};

export default DragSource('word', spec, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging(),
  dropResult: monitor.getDropResult(),
  canDrag: monitor.canDrag(),
}))(WordItem);

Mit dem Kontext verbundener Container:

export default DragDropContext(HTML5Backend)(App);

Ich habe bereits ein Projekt mit react-dnd durchgeführt, aber dies ist das erste Mal, dass ich dieses Problem sehe. Hier ist meine package.json, wenn dieses Problem mit der Kompatibilität der Bibliotheken zusammenhängen könnte:

{
  "name": "",
  "version": "1.0.0",
  "description": "npm i -g prettier",
  "main": "index.js",
  "scripts": {
    "clean": "rimraf dist",
    "dev": "cross-env NODE_ENV=development node devServer.js",
    "build": "npm run clean && cross-env NODE_ENV=production webpack --config=webpack.build.config.js -p && node productionServer.js",
    "flow": "flow"
  },
  "author": "",
  "license": "ISC",
  "browserslist": [
    "last 5 versions",
    "not ie < 11"
  ],
  "prettier": {
    "singleQuote": true,
    "trailingComma": "all"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "babel-plugin-styled-components": "^1.5.1",
    "es6-promise": "^4.2.4",
    "prop-types": "^15.6.1",
    "rc-slider": "^8.6.1",
    "react": "^16.3.2",
    "react-dnd": "^3.0.2",
    "react-dnd-html5-backend": "^3.0.2",
    "react-dom": "^16.3.2",
    "react-motion": "^0.5.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "redux": "^4.0.0",
    "redux-thunk": "^2.2.0",
    "styled-components": "^3.2.6",
    "svg-inline-loader": "^0.8.0",
    "xml2js": "^0.4.19"
  },
  "devDependencies": {
    "autoprefixer": "^8.3.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "browserslist": "^3.2.4",
    "compression-webpack-plugin": "^1.1.11",
    "cross-env": "^5.1.4",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "^7.7.0",
    "express": "^4.16.3",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "flow-bin": "^0.70.0",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^4.2.0",
    "node-sass": "^4.8.3",
    "postcss-loader": "^2.1.4",
    "prettier-eslint": "^8.8.1",
    "react-hot-loader": "^4.0.0",
    "rimraf": "^2.6.2",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.20.3",
    "url-loader": "^1.0.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.1.2",
    "webpack-dev-middleware": "^3.1.2",
    "webpack-hot-middleware": "^2.22.1"
  }
}

Bitte helfen Sie, dieses Problem zu beheben.