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

There is no need for the div workaround or turning your functional component into a class one. You can use forwardRef instead and it will work too:

const PlannerIcon = React.forwardRef((props, ref) => (  <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"    {...props}    ref={ref}  >    <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>  ));

I'm not sure what the Icon component is about, you might need to turn it into an <svg> tag.

If anyone is using typescript, the syntax is a little confusing, the first type is the one for the ref and second for the props (don't ask me why):

const PlannerIcon = React.forwardRef<SVGSVGElement | null, IPlannerIconProps>((props, ref) => {    ...});

I believe you need title="Planner" not text="Planner".

<Tooltip title="Planner"><PlannerIcon /></Tooltip>