title: How to fix 'Could not find the drag and drop manager in the context of DragSource(Component)'
body: <p>I have following code</p>
  
  <pre><code>const VisiblePropsPanelItem = React.forwardRef(
  ({ classes, onChangeValue, attrib, isDragging, connectDragSource, connectDropTarget }, ref) =&gt; {
      const elementRef = useRef(null)
      connectDragSource(elementRef)
      connectDropTarget(elementRef)
  
  
      const opacity = isDragging ? 0 : 1
      useImperativeHandle(ref, () =&gt; ({
          getNode: () =&gt; elementRef.current,
      }))
  const value = !!(attrib.value)
  
      return (
    &lt;div ref={elementRef} key={ attrib.name } className = { classes.statusTaskUnit }&gt;
          &lt;CheckBox
            className = { classes.statusCheckBox }
            color = "primary"
            value = { value }
            onChangeValue = { () =&gt; { onChangeValue(attrib) } }
          /&gt;
          &lt;div className = { classes.statusTextUnit }&gt;{ attrib.name }&lt;/div&gt;
            &lt;IconButton aria-label="Comments"&gt;
              &lt;DragIcon /&gt;
            &lt;/IconButton&gt;
      &lt;/div&gt;
      )
  },
  )
  
  export default DropTarget(
  CARD,
  {
      hover(
    props: MyProps,
          monitor: DropTargetMonitor,
          component: CardInstance,
      ) {
          if (!component) {
              return null
          }
          const node = component.getNode()
          if (!node) {
              return null
          }
          const dragIndex = monitor.getItem().index
          const hoverIndex = props.index
  
          if (dragIndex === hoverIndex) {
              return
          }
  
          const hoverBoundingRect = node.getBoundingClientRect()
  
          const hoverMiddleY =
              (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
  
          const clientOffset = monitor.getClientOffset()
  
          const hoverClientY = (clientOffset).y - hoverBoundingRect.top
  
          if (dragIndex &lt; hoverIndex &amp;&amp; hoverClientY &lt; hoverMiddleY) {
              return
          }
  
          if (dragIndex &gt; hoverIndex &amp;&amp; hoverClientY &gt; hoverMiddleY) {
              return
          }
  
      },
  },
  (connect: DropTargetConnector) =&gt; ({
      connectDropTarget: connect.dropTarget(),
  }),
  )(
  DragSource(
      CARD,
      {
          beginDrag: (props: MyProps) =&gt; ({
              name: props.attrib.name,
              value: props.attrib.value,
          }),
      },
      (connect: DragSourceConnector, monitor: DragSourceMonitor) =&gt; ({
          connectDragSource: connect.dragSource(),
          isDragging: monitor.isDragging(),
      }),
  )(VisiblePropsPanelItem),
  )
  </code></pre>
  
  <p>but when I try to run it, I get: Uncaught Invariant Violation: Could not find the drag and drop manager in the context of DragSource (Component). Make sure you have your app with DragDropContext.</p>
  
  <p>How can i fix it?</p>
  
  <p>The code is taken from here: <a href="https://github.com/react-dnd/react-dnd/blob/master/packages/examples/src/04-sortable/simple/Card.tsx" rel="nofollow noreferrer">https://github.com/react-dnd/react-dnd/blob/master/packages/examples/src/04-sortable/simple/Card.tsx</a></p>