DragDropContextProvider creates new backend on each update

[WearyMonkey]

DragDropContextProvider creates a new backend on each call to getChildContext. getChildContext is called on each update. This results in Cannot have two HTML5 backends at the same time error if a draggable child is added.

Example to reproduce:

import * as React from 'React';
import * as ReactDOM from 'react-dom';
import { DragDropContextProvider, DropTarget } from 'react-dnd';
import ReactDnDHTML5Backend from 'react-dnd-html5-backend';

class Parent extends React.Component<{}, { count: number }> {

  constructor() {
    super();
    this.state = { count: 1 };
  }

  render() {
    return (
        <div>
          <button onClick={() => this.setState({ count: this.state.count + 1 })}>Add</button>
          <DragDropContextProvider backend={ReactDnDHTML5Backend}>
            <div>
              {Array(this.state.count).fill(null).map((_, i) => (
                  <Target key={i} />
              ))}
            </div>
          </DragDropContextProvider>
        </div>
    );
  }
}

@DropTarget('foo', { }, (connect, monitor) => ({ }))
class Target extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'));

No error if @DragDropContent decorator is used directly as it creates the context once on initialisation.