react-dnd experience problems using summary

Can not have two HTML5 backends at the same time when 1. Use

We had been wrapped into the outer layer of the App provider, but no matter how they change, the outer layer of prodvider will not change (that is, a page operation, it will not re-rendered), as has been the change is internal App

import React from "react";
import {render} from "react-dom";
import App from "./components/App";
import {DragDropContextProvider} from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import reducer from "./reducer";

let store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
render(
    <DragDropContextProvider backend={HTML5Backend}>
        <Provider store={store}>
            <App/>
        </Provider>
    </DragDropContextProvider>
    , document.getElementById("root"));

Here is the original code that
when I put this this as a widget in a system, this time, the provider will be rendered many times, so now,
I originally transplanted directly to the code, and then change the next provider

import React from "react";
import HTML5Backend from 'react-dnd-html5-backend'
import {DragDropContextProvider} from 'react-dnd'
import DragAndDropHOC from  './DragAndDropHOC'

import App from './App'

export default (props) => {
  return (
    <DragDropContextProvider backend={HTML5Backend}>
      <App/>
    </DragDropContextProvider>
  )
}

Here we must ask, why remove the inside, this time as a component of this has been wrapped in the outermost layer of the project
and later a browser running on the error, first I was wondering, I used only in the assembly once, why they reported twice, then I see the development tools, then check out the official did not know the issue
address: https://github.com/react-dnd/react-dnd/issues/186
probably means we need to set the context unique identification, my solution here
first wrapped with a layer of high-order components HOC

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

const DragAndDropHOC = props => {
  return <React.Fragment>
    {props.children}
  </React.Fragment>
};

export default {
  HTML5: DragDropContext(HTML5Backend)(DragAndDropHOC),
  //Touch: DragDropContext(TouchBackend)(DragAndDropHOC),
}

Then the place is such a call

import React from "react";
import DragAndDropHOC from  './DragAndDropHOC'

import App from './App'

export default (props) => {
  return (
    <DragAndDropHOC.HTML5 {...props}>
      <App/>
    </DragAndDropHOC.HTML5>
  )
}

In fact, the purpose of doing this is simply to ensure that there is a system DragDropContext