material-ui v4.0.1 warning "Expected an element that can hold a ref"

Wrapping my component to another div inside material-ui transition componet (like Slide, Fade etc) solves my issue. Example code:

From

<Slide direction='Right' in = {isSideNavOpen} mountOnEnter unmountOnExit>
      <MyComponent />
</Slide>

To

<Slide direction='Right' in = {isSideNavOpen} mountOnEnter unmountOnExit>
     <div><MyComponent /></div>
</Slide>`

My issue didn't actually have to do with Dialog, but with the prop TransitionComponent on Dialog.

I switch between two types of transitions in my ApolloFormDialog depending on if the screen is below a certain breakpoint, which was being called as function components:

<Dialog
  open={open}
  onClose={onRequestClose}
  classes={{
    paper: classnames(classes.dialogWidth, classes.overflowVisible),
  }}
  fullScreen={fullScreen}
  TransitionComponent={
    fullScreen ? FullscreenTransition : DefaultTransition
  }
>
  {content}
</Dialog>

FullscreenTransition and DefaultTransition come from a file and are defined as follows:

import React from 'react'
import Fade from '@material-ui/core/Fade'
import Slide from '@material-ui/core/Slide'

export function DefaultTransition(props) {
  return <Fade {...props} />
}

export function FullscreenTransition(props) {
  return <Slide direction='left' {...props} />
}

export function FullscreenExpansion(props) {
  return <Slide direction='right' {...props} />
}

Changing these functions to the following fixed my issue:

import React from 'react'
import Fade from '@material-ui/core/Fade'
import Slide from '@material-ui/core/Slide'

export const DefaultTransition = React.forwardRef((props, ref) => (
  <Fade {...props} ref={ref} />
))

export const FullscreenTransition = React.forwardRef((props, ref) => (
  <Slide direction='left' {...props} ref={ref} />
))

export const FullscreenExpansion = React.forwardRef((props, ref) => (
  <Slide direction='right' {...props} ref={ref} />
))

This was a relatively hard issue to solve on my end, so I'm going to leave this question up just in case someone else runs into a similar issue somewhere down the road.

I have had the same problem with "@material-ui/core/Tooltip" wrapping a new functional component. Even if the component was wrapped in a div inside its own code.

<!-- "Did you accidentally use a plain function component for an element instead?" -->

<Tooltip>
  <NewFunctionalComponent />
</Tooltip>

<!-- Wrapped in a new div, devtools won't complain anymore -->

<Tooltip>
  <div>
    <NewFunctionalComponent />
  </div>
</Tooltip>

<!-- No more warnings! -->