DragSource is not found in react-dnd

Question

I'm learning about drag and drop in react, but I keep getting this error (see image) that DragSource doesn't exist in react-dnd. I have installed react-dnd using "npm install react-dnd". I haven't seen any answer to this bug in my of the research I did.

react-dnd package in node_modules

Code below:

import React, {Component} from 'react'
import {DragSource} from 'react-dnd'

const itemSource = {
    beginDrag(props) {
        return props.item
    },
    endDrag(props, monitor, component) {
        return props.handleDrop(props.item.id)
    }
}

function collect(connect, monitor) {
    return {
        connectDragSource: connect.dragSource(),
        connectDragPreview: connect.dragPreview(),
        isDragging: monitor.isDragging()
    }
}

class Item extends Component {
    render() {
        
const { isDragging, connectDragSource, item } = this.props;
        return connectDragSource(
            <div className='item'>
                <span>{item.name}</span> 
            </div> 
        )
    }
}

export default DragSource('item', itemSource, collect)(Item)

Answer 1

According to react-dnd release v15.0.0

The Decorators API has been removed and fully replaced by the Hooks API

The Decorators API included DragSource and DropTarget. They can be replaced by useDrag and useDrop hooks from react-dnd.