Is there a better alternative to cloneElement?

When using ToggleButton from lab package and wrapping it in tooltip it raises a warning: Warning: Failed prop type: The following properties are not supported: selected, onChange. Please remove them.

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

Expected Behavior

It should be possible to add a tooltip to ToggleButton

Current Behavior

<Tooltip title="left" placement="top">
  <ToggleButton value="left">
    <FormatAlignLeftIcon />
  </ToggleButton>
</Tooltip>

Steps to Reproduce

Link: https://codesandbox.io/s/q7m82k4024

1. Wrap the ToggleButton inside a Tooltip
2. Run the code
3. See the console for warning

Context

Since ToggleButtons are IconButton (at least that’s how we intend to use it) it would be helpful to a user to see what that button will do and the best way for that is Tooltip

Your Environment

Tech	Version
Material-UI	v3.1.0
React	v16.4
Browser	any

[totszwai]

Guys, Tooltip breaks ToggleButton.

The selected CSS class will not get set if you wraps the Tooltip around the button.

<ToggleButtonGroup>
  <Tooltip title="whatever1">
     <ToggleButton value="blah1">Blah1</ToggleButton>
  </Tooltip>
  <Tooltip title="whatever2">
     <ToggleButton value="blah2">Blah2</ToggleButton>
  </Tooltip>
</ToogleButtonGroup>

Without Tooltip you can see that the proper class is being added:

When wrapping the ToggleButton with a tooltip, it breaks:

[eps1lon]

Just a random thought but wouldn’t it be better to create a context in ToggleButtonGroup that the ToggleButtons can listen to? That way we could get away from the cloneElement pattern.