MUI two tooltips on one component - reactjs

Question

I want to display two tooltips on a button. However, I can't find any way to do it without errors in the console.
My goal:
Minimal reproducible example
import * as React from 'react';
import { Tooltip, Button, Box } from '#mui/material';
export default function BasicTooltip() {
return (
<Box sx={{ margin: 10 }}>
<Tooltip title="Tooltip on top" placement="top">
<Tooltip title="Tooltip on button" placement="bottom">
<Button>Hello</Button>
</Tooltip>
</Tooltip>
</Box>
);
}
Error I'm getting in the console with this code:
MUI: You have provided a title prop to the child of Tooltip.
Remove this title prop Tooltip on button or the Tooltip component.
Link to stackblitz: https://stackblitz.com/edit/react-qgtibd?file=demo.js
I already tried to isolate the inner tooltip with button in another component like this, but it did not work:
import * as React from 'react';
import { Tooltip, Button, Box } from '#mui/material';
const MyButton = React.forwardRef(({ tooltipText }, ref) => (
<Tooltip title={tooltipText} placement="bottom">
<Button ref={ref}>Hello</Button>
</Tooltip>
));
export default function BasicTooltip() {
return (
<Box sx={{ margin: 10 }}>
<Tooltip title="Tooltip on top" placement="top">
<MyButton tooltipText="Tooltip on bottom" />
</Tooltip>
</Box>
);
}
edit: I also can't put a div nor React.fragment between those tooltips, because it completely screws up the layout in my real case scenario.

Answer 1

Looks like you need to isolate the tooltips from one another
<Box sx={{ margin: 10 }}>
<Tooltip title="Tooltip on top" placement="top">
<Box>
<Tooltip title="Tooltip on button" placement="bottom">
<Button>Hello</Button>
</Tooltip>
</Box>
</Tooltip>
</Box>
modified stackblitz with the aligment