How to use the react-dnd/lib/DropTarget function in react-dnd

listIdx: item.listIdx,
        id: item.id
      },
      {
        listIdx: props.listIdx,
        id: props.id
      });
  }
};

@DragSource('Item', dragSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  connectDragPreview: connect.dragPreview(),
  isDragging: monitor.isDragging()
}))
@DropTarget('Item', dropTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver()
}))
@immutableRenderDecorator
export default class Item extends Component {
  constructor(props) {
    super(props);
    this.openInBrowser = this.openInBrowser.bind(this);
  }

  openInBrowser() {
    openUrl(`https://github.com/${this.props.name}`);
  }

  render() {
    let content = (

const dropTarget = {
  drop(props, monitor) {
    if (monitor.didDrop()) return;
    const item = monitor.getItem();
    if (props.idx === item.listIdx) return;
    item.onReorder({
      listIdx: item.listIdx,
      id: item.id
    }, {
      listIdx: props.idx
    });
  }
};

@DropTarget('Item', dropTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  isOverCurrent: monitor.isOver({ shallow: false })
}))
@immutableRenderDecorator
export default class SortableList extends Component {
  getTitle() {
    switch (this.props.idx) {
      case 0: return 'High priority (critical)';
      case 1: return 'Medium priority';
      default: return 'Low priority';
    }
  }

  render() {
    const { idx, list, targets, connectDropTarget, onReorder } = this.props;