Multiple material-ui tooltips open on click

Question

I'm trying to use 2 Material-UI tooltips in the same parent component. Also, I need a custom control for the open and close action of the tooltips. So, I used the open and setOpen states using the UseState hook.

How can I maintain separate states for the 2 tooltips that I use, so that I can differentiate between the respective tooltip's open and close action?

Please help. Hope I made the problem statement clear.

Answer 1

Create two separate state variables

const MyComponent = () => {
  const [open1, open1Set] = useState(false);
  const [open2, open2Set] = useState(false);
};