React 16 - Update: Warning: Stateless function components cannot be given refs.

[jmdelcarmen]

Currently updated my project to React v16.0.0 from v15.6.2, and ran into this compatibility issue.

It appears that when the DecoratedComponent wrapped by DragDropContext and DragSource uses ref in React v16.0.0, this error is thrown. Error persists even if I refactor the component from stateless to class-based.

warning.js:33 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `DragDropContext(withRouter(Board))`.
    in withRouter(Board) (created by DragDropContext(withRouter(Board)))
    in DragDropContext(withRouter(Board)) (created by Cards)
...

package versions

• react@^16.0.0
• react-dom@^16.0.0
• react-dnd@^2.5.3
• react-router@4.1.2

[haf]

If I have

 yarn list react-dnd
yarn list v1.3.2
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ react-dnd@2.5.4
✨  Done in 0.93s.

And I'm still getting this error:

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `DragDropContext(RendererRaw)`.
    in RendererRaw (created by DragDropContext(RendererRaw))
    in DragDropContext(RendererRaw) (created by Connect(DragDropContext(RendererRaw)))
    in Connect(DragDropContext(RendererRaw)) (created by App)
    in IntlProvider (created by Connect(IntlProvider))
    in Connect(IntlProvider) (created by App)
    in div (created by LoggingProvider)
    in LoggingProvider (created by Connect(LoggingProvider))
    in Connect(LoggingProvider) (created by App)
    in Provider (created by App)
    in App

For code:

// @flow
import { DragDropContext, DragDropContextProvider } from 'react-dnd';
// import HTML5Backend from 'react-dnd-html5-backend';
import MultiBackend from 'react-dnd-multi-backend';
import HTML5toTouch from 'react-dnd-multi-backend/lib/HTML5toTouch'; // or any other pipeline

export const Backend = MultiBackend(HTML5toTouch);
export { DragDropContextProvider as Provider }
export default (App: any) => DragDropContext(Backend)(App);

import {
  default as DragDropContext,
  Provider as DragDropContextProvider,
  Backend as DragDropBackend
} from './lib/dragAndDrop';
// ...
  <DragDropContextProvider backend={DragDropBackend}>
    { props.user.authenticated
        ? <AppChrome />

What might that be because of?