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

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:

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

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

2. 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>
       )
     }
   };