Material UI tooltip doesn't display on custom component, despite spreading props to that component

I am having difficulties making the Material UI tooltip actually appear when hovering over a component. As far as I can tell, I am doing about the simplest implementation of the tooltip component: I import it directly (no custom styles or anything else yet), and I wrap it around another component that spreads out its props at the top level.

From reading the documentation it should be that simple, but it is not appearing on hover, and in the React DevTools I see that the anchorEl prop of is undefined.

import Tooltip from '@material-ui/core/Tooltip';

const containerComponent = () => (
    <Tooltip text="Planner"><PlannerIcon /></Tooltip>
)

PlannerIcon.js

const PlannerIcon = (props) => (
  <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"
    {...props}
  >
    <path d="M14.71,3.11V14.88H2.94V3.11H14.71m1-1H1.94V15.88H15.71V2.11Z"/>
    <line x1="1.94" y1="9" x2="15.71" y2="9" strokeMiterlimit="10"/>
    <line x1="8.83" y1="2.12" x2="8.83" y2="15.77" strokeMiterlimit="10"/>
  </Icon>
  );

Solution

Your Tooltip is not working properly because the child of a Material-UI Tooltip must be able to hold a ref.

The following can hold a ref:

Any Material-UI component
class components i.e. React.Component or React.PureComponent
DOM (or host) components e.g. div or button
React.forwardRef components
React.lazy components
React.memo components

PlannerIcon is not any of the above, it's a function component. I'll suggest Two solutions for the problem:

Surround PlannerIcon with div as a parent element (div can hold a ref):

<Tooltip text="Planner">
  <div>
   <PlannerIcon />
  </div>
</Tooltip>

Convert PlannerIcon into a class component:

class PlannerIcon extends React.Component {
  render(){
    return(
     <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"
      {...props}
     >
       <path d="M14.71,3.11V14.88H2.94V3.11H14.71m1-1H1.94V15.88H15.71V2.11Z"/>
       <line x1="1.94" y1="9" x2="15.71" y2="9" strokeMiterlimit="10"/>
       <line x1="8.83" y1="2.12" x2="8.83" y2="15.77" strokeMiterlimit="10"/>
     </Icon>
    )
  }
};