Get backend instance from react-dnd

Question

I'm attempting to use react-dnd and react-big-calendar with drag-n-drop support (using react-dnd under the hood as well) in an app together. However, if I initiate them separately, I get an error:

Uncaught Error: Cannot have two HTML5 backends at the same time.

Here's the code:

App.js

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

class App extends React.Component {
  render() {
    return {
      <div>
        ...
        <Calendar />
      </div>
    }
  }
}

export default DragDropContext(HTML5Backend)(App)

Calendar.js

import React from 'react'
import BigCalendar from 'react-big-calendar'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'

const Calendar = withDragAndDrop(BigCalendar)
...

react-big-calendar documentation mentions that the withDragAndDrop() function can accept a backend as a second argument, meaning, in theory, I should be able to retrieve the backend instance that I have already set for react-dnd and pass it as an argument. However, I'm not sure how I retrieve the backend instance.

react-dnd documentation for DragDropContext mentions an instance method getManager() which should help me retrieve the backend (getManager().getBackend()). However, the key here is instance method. How do I get the instance of DragDropContext(HTML5Backend)(App) from my Calendar.js file?