Drag source is not rendering at all

Describe the bug Component decorated with DragSource is not rendered at all (render function is not called)

To Reproduce Write such component:

import * as React from "react";
import styled from "styled-components";
import {
  DragSource,
  DragSourceConnector,
  DragSourceMonitor,
  ConnectDragSource
} from "react-dnd";

const ImageHolder = styled.div`
  margin: 10px;
  max-width: 200px;
  width: 200px;
  min-height: 100px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
`;

const ImageNameHolder = styled.div`
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
`;

interface Props {
  imagePath: string;
  connectDragSource?: ConnectDragSource;
  isDragging?: boolean;
}

@DragSource<Props>(
  "image",
  {
    beginDrag: (props: Props) => props.imagePath
  },
  (connect: DragSourceConnector, monitor: DragSourceMonitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  })
)
export class PhotosBrowserPhoto extends React.Component<Props> {
  render() {
    const { imagePath, connectDragSource } = this.props;
    console.log({ connectDragSource });
    return connectDragSource(
      <div>drag me</div>
    );
  }
}

Expected behavior Draggable component with drag me text, connectDragSource printed in the console

Actual behavior Nothing is rendered at all, console is empty

[theoutlander]

I had to add the provider as shown below:

import HTML5Backend from 'react-dnd-html5-backend'
import { DragDropContextProvider } from "react-dnd";

<DragDropContextProvider backend={HTML5Backend}>
 <App/>
</DragDropContextProvider>

[pie6k]

Adding provider component in root of my app solved the issue.

I think however - it should be clearly noted in example code that it’s needed - I thought seeing example is enough to understand how to start using library