Failed prop type: Invalid prop `children` supplied to `ForwardRef(Tooltip)`. Expected an element that can hold a ref

And because the tooltip component causes similar issues with disabled buttons wrapped-in, I created a wrapper to get around this problem. So the wrapper could be like:

import {Tooltip} from '@mui/material';

const PatchTooltip = ({children, ...props}) =>
  <Tooltip {...props}>
    <span>{children}</span>
  </Tooltip>

export default PatchTooltip;

Then place it in a temp-workaround folder and use it.

import Tooltip from './Workarounds/Tooltip';

If you wrap the children of the Tooltip to a fragment it doesn’t generate an error

<Tooltip title="Something">
      <>
        <ClickAwayListener onClickAway={handleClickAway}>
          <Box sx={{ position: "relative" }}>
            <button type="button" onClick={handleClick}>
              Open menu dropdown
            </button>
            {open ? (
              <Box sx={styles}>
                Click me, I will stay visible until you click outside.
              </Box>
            ) : null}
          </Box>
        </ClickAwayListener>
      </>
    </Tooltip>

And there is no reference passed in fragments. That’s not an expected behavior