title: Tooltip component from MaterialUI logs warnings on client console
body: <p>Tooltip of MaterialUI, pushes warnings on client console "Failed prop type". But no such props has been used in my components</p>
  
  <p>Warnings on my client console:</p>
  
  <pre><code>Warning: Failed prop type: The following properties are not supported: `tabIndex`, `onFocus`. Please remove them.
  
  Warning: Failed prop type: The following properties are not supported: `className`. Please remove them.
  </code></pre>
  
  <p>Screenshots: <a href="https://prnt.sc/l8yyxg" rel="nofollow noreferrer">Screenshot_1</a>, <a href="https://prnt.sc/l8yz9v" rel="nofollow noreferrer">Screenshot_2</a></p>
  
  <p>This happens when I have children components inside Tooltips like this:</p>
  
  <pre><code>&lt;Tooltip title="Push Order" placement="bottom" classes={{ tooltip:classes.tooltip }}&gt;
    &lt;IconButton&gt;
     &lt;ShoppingBasket classes={{ root: classes.icon }} /&gt;
    &lt;/IconButton&gt;
  &lt;/Tooltip&gt;
  </code></pre>
  
  <p>My whole component which is effected by this issue:</p>
  
  <pre><code>import React from 'react'
  import { Meteor } from 'meteor/meteor'
  import { Roles } from 'meteor/alanning:roles'
  import { Link } from 'react-router-dom'
  import styled from 'styled-components'
  import { MenuList, MenuItem, Tooltip } from '@material-ui/core'
  
  import HomeIcon from '@material-ui/icons/Home'
  import FlightIcon from '@material-ui/icons/Flight'
  import AccountCircle from '@material-ui/icons/AccountCircle'
  import ExitToApp from '@material-ui/icons/ExitToApp'
  
  import { bindActionCreators } from 'redux'
  import { connect } from 'react-redux'
  import { ActionCreators } from '../../../app/actions'
  
  const StyledMenuItem = styled(MenuItem)`
    &amp;&amp; {
      text-transform: uppercase;
      @media screen and (min-width: 960px) {
        display: inline-flex;
      }
    }
  `
  
  class NavItem extends React.Component {
    constructor(props) {
      super(props)
      const { checkUserId } = props
      checkUserId()
    }
  
    logOut = () =&gt; {
      const { checkUserId } = this.props
      Meteor.logout(error =&gt; {
        if (error) {
          console.log(error)
        }
        checkUserId()
      })
    }
  
    render() {
      const { menuState, userId, toggleMenuState } = this.props
      const isAdmin = Roles.userIsInRole(userId, ['admin'])
      const isLoggedIn = userId !== null
      return (
        &lt;div&gt;
          {!userId || !menuState ? (
            &lt;MenuList&gt;
              {isLoggedIn ? (
                &lt;Tooltip title="Switch Menus" placement="bottom"&gt;
                  &lt;StyledMenuItem onClick={() =&gt; toggleMenuState(!menuState)}&gt;
                    &lt;HomeIcon /&gt;
                  &lt;/StyledMenuItem&gt;
                &lt;/Tooltip&gt;
              ) : (
                &lt;StyledMenuItem component={Link} to="/"&gt;
                  &lt;HomeIcon /&gt;
                &lt;/StyledMenuItem&gt;
              )}
  
              &lt;StyledMenuItem component={Link} to="/products"&gt;
                producten
              &lt;/StyledMenuItem&gt;
              &lt;StyledMenuItem component={Link} to="/blogs"&gt;
                BLOGS
              &lt;/StyledMenuItem&gt;
              &lt;StyledMenuItem component={Link} to="/contact"&gt;
                CONTACT
              &lt;/StyledMenuItem&gt;
              {isLoggedIn ? (
                &lt;Tooltip title="Sign Out" placement="bottom"&gt;
                  &lt;StyledMenuItem onClick={() =&gt; this.logOut()}&gt;
                    &lt;ExitToApp /&gt;
                  &lt;/StyledMenuItem&gt;
                &lt;/Tooltip&gt;
              ) : (
                &lt;Tooltip title="Sign In" placement="bottom"&gt;
                  &lt;StyledMenuItem component={Link} to="/auth/sign-in"&gt;
                    &lt;AccountCircle /&gt;
                  &lt;/StyledMenuItem&gt;
                &lt;/Tooltip&gt;
              )}
            &lt;/MenuList&gt;
          ) : (
            &lt;MenuList&gt;
              &lt;StyledMenuItem
                component={Link}
                to={isAdmin ? '/missions/requests/admin' : '/missions/requests/user'}
              &gt;
                Requests
              &lt;/StyledMenuItem&gt;
              &lt;StyledMenuItem
                component={Link}
                to={isAdmin ? '/missions/orders/admin' : '/missions/orders/user'}
              &gt;
                Orders
              &lt;/StyledMenuItem&gt;
  
              {isAdmin ? (
                &lt;StyledMenuItem component={Link} to="/users/list"&gt;
                  Users
                &lt;/StyledMenuItem&gt;
              ) : (
                ''
              )}
              {isAdmin ? (
                &lt;StyledMenuItem component={Link} to="/versions"&gt;
                  Versions
                &lt;/StyledMenuItem&gt;
              ) : (
                ''
              )}
              {menuState ? (
                &lt;Tooltip title="Switch Menus" placement="bottom"&gt;
                  &lt;StyledMenuItem onClick={() =&gt; toggleMenuState(!menuState)}&gt;
                    &lt;FlightIcon /&gt;
                  &lt;/StyledMenuItem&gt;
                &lt;/Tooltip&gt;
              ) : (
                ''
              )}
              &lt;Tooltip title="Sign Out" placement="bottom"&gt;
                &lt;StyledMenuItem onClick={() =&gt; this.logOut()}&gt;
                  {isLoggedIn ? &lt;ExitToApp /&gt; : ''}
                &lt;/StyledMenuItem&gt;
              &lt;/Tooltip&gt;
            &lt;/MenuList&gt;
          )}
        &lt;/div&gt;
      )
    }
  }
  
  const mapStateToProps = state =&gt; ({
    menuState: state.mainReducer.menuState,
    userId: state.mainReducer.userId,
  })
  
  function mapDispatchToProps(dispatch) {
    return bindActionCreators(ActionCreators, dispatch)
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(NavItem)
  </code></pre>