Using HOC to wrap icon inside tooltip component - reactjs

Question

Using a higher order component to wrap icon, the issue is that the tooltip is not shown unless i click on the icon atleast once. Have added two tooltips the first one is w/o hoc and works as expected, unlike 2nd one in which i have to click once after which tooltip is shown.
Can someone please help??
function componentGenerator(WrappedComponent) {
function DynamicComponent(props, ref) {
return <WrappedComponent {...props} />;
}
return React.forwardRef(DynamicComponent);
}
const MyIcon = React.forwardRef((props, ref) => {
return (
<IconButton {...props}>
<Avatar alt="Not working" src="/static/images/avatar/2.jpg"/>
</IconButton>
);
});
const MyHoc = componentGenerator(MyIcon);
export default function App() {
return (
<div className="App">
<Tooltip title="Open settings" key="1">
<IconButton sx={{ p: 0 }}>
<Avatar alt="Working" src="/static/images/avatar/2.jpg"/>
</IconButton>
</Tooltip>
<Tooltip title="Open settings" key="2">
<MyHoc />
</Tooltip>
</div>
);
}
https://codesandbox.io/s/infallible-booth-2wfeq0?file=/src/App.js:515-521

Answer 1

From the official react documentation:
... ref is not a prop. Like key, it’s handled differently by React
That's why you need to pass in ref additionally to your spread props:
import "./styles.css";
import { Avatar, IconButton, Tooltip } from "#mui/material";
import React from "react";
function componentGenerator(WrappedComponent) {
function DynamicComponent(props, ref) {
return <WrappedComponent {...props} ref={ref} />;
}
return React.forwardRef(DynamicComponent);
}
const MyIcon = React.forwardRef((props, ref) => {
return (
<IconButton {...props} ref={ref}>
<Avatar alt="Not working" src="/static/images/avatar/2.jpg" />
</IconButton>
);
});
const MyHoc = componentGenerator(MyIcon);
export default function App() {
return (
<div className="App">
<Tooltip title="Open settings" key="1">
<IconButton sx={{ p: 0 }}>
<Avatar alt="Working" src="/static/images/avatar/2.jpg" />
</IconButton>
</Tooltip>
<br />
<br />
<Tooltip title="Open settings" key="2">
<MyHoc />
</Tooltip>
</div>
);
}
https://codesandbox.io/s/elegant-gates-nbvebo?fontsize=14&hidenavigation=1&theme=dark