Невозможно назначить «MyComponent», потому что это не переменная (поддержка многократного перетаскивания react-dnd в ReactJS

Я хотел бы иметь перетаскивание одновременно с помощью react-dnd

// ... imports ...
class MyComponent extends Component {
  render () {
    const { connectDragSource, isDragging, connectDropTarget, isOver } = this.props

    return connectDragSource(connectDropTarget(
      <div style = {{ opacity: isDragging ? 0.5 : 1 }} >
        Just an example
     </div>
    ))
  }
}

MyComponent = DragSource('MyComponent', elementSource, (connect, 
monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging()
}))(MyComponent);

MyComponent = DropTarget('MyComponent', elementTarget, connect => ({
  connectDropTarget: connect.dropTarget(),
}))(MyComponent);

export default MyComponent;

Я обнаружил, что это возможно в здесь. Однако в моей среде я получаю эту ошибку:

Cannot assign to 'MyComponent' because it is not a variable [.ts(2539)]

Я использую TypeScript (.ts). Может ли это быть проблемой? Если да, то как добиться того же в TypeScript?