[4.0.0-beta.1] Wrapping function components in <Tooltip /> causes errors

Anytime I wrap a custom component in a <Tooltip /> (for example I have a custom styled light button) I get this or similar error:

index.js:1446 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Those always disappear if I remove the Tooltip wrapper around my component. Tooltips aren’t working for me, I use functional components so they cannot be given refs.

• [ x ] This is not a v0.x issue.
• [ x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

I use a Tooltip like the docs say

      <Tooltip title="Delete">
        <IconButton aria-label="Delete">
          <DeleteIcon />
        </IconButton>
      </Tooltip>

and it works without errors.

Current Behavior 😯

const styles = {
  light: {
    color: grey[400],
    '&:hover': {
      backgroundColor: 'rgba(0, 0, 0, 0.03)',
    }
  }
};

const ButtonLight = ({ classes, type, children, ...otherProps }) => {
  switch (type) {
    case 'fab':
      return <Fab {...otherProps} className={classes.light}>{children}</Fab>;
    case 'icon':
      return <IconButton {...otherProps} className={classes.light}>{children}</IconButton>;
    case 'button':
    default:
      return <Button {...otherProps} className={classes.light}>{children}</Button>
  }
};

export default withStyles(styles)(ButtonLight)

    <Tooltip title={tooltip} placement="top">
      <ButtonLight type="icon" onClick={handleModalShow}>
        <EditIcon />
      </ButtonLight>
    </Tooltip>

Wrapping a custom component like <ButtonLight /> in a MUI <Tooltip /> results in following error:

index.js:1446 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of WithStyles(ButtonLight).

Steps to Reproduce 🕹

Link:

Context 🔦

I’m trying to, well, develop an app. The constant popping error console.logs are affecting my performance and disturbing me.

Your Environment 🌎

Tech	Version
Material-UI	4.0.0-beta.1
React	16.8.6
Browser	Chrome
TypeScript	No
etc.

[DJanoskova]

But functional components are the future of React. This feels like a downgrade and makes me want to move back to the old Material UI version. Since hooks are there, percentage of function components vs class components is only going to increase in projects.

Thanks for the response though.

[ShamansCoding]

As a solution to this issue, you can wrap your components with <div>. At least in my case, it did its job. ClickAwayListener cannot be wrapped by the Tooltip. I just wrapped it with div.