Wrap React-App with React-DND HTML5Backend

Create a component which will wrap react children with React-DND HTML5Backend.

DragAndDropProvider.tsx

import React from 'react'
import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'

export class DragAndDropProvider extends React.Component<{}, {}> {

  constructor (props: any) {
    super(props)
  }

  render (): JSX.Element {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

export default DragDropContext(HTML5Backend)(DragAndDropProvider)

Wrap the AppRoot with above created DragAndDropProvider.

index.ts

import DragAndDropProvider from './DragAndDropProvider'

.....
/** Render a component tree composed with the DragAndDropProvider. */
const render = (AppRoot: typeof App) => {
  ReactDOM.render(
    React.createElement(HotContainer, {},
      React.createElement(Router, { history },
        React.createElement(DragAndDropProvider, {},
          React.createElement(AppRoot, {}, null)
        )
      )
    ),
    document.getElementById('app')
  )
}