After applying tooltip menu options showing in different location in the window instead of below the buttion icon in material ui. How resolve the same

I'm trying to apply tooltip to option menu icon but it not working as i expected way.

my code is:

export default function FadeMenu() {
    const [ anchorEl, setAnchorEl ] = React.useState(null)
    const bus = Bus()
    const open = Boolean(anchorEl)

    const handleClick = event => {
        setAnchorEl(event.currentTarget)
    }

    const handleClose = option => {
        
    }

    return (
        <div style={{alignItems: 'center', display: 'flex'}}>
            <CustomTooltip title={'Add Request'} placement={'top'} arrow>
                <IconButton
                    aria-label={'more'}
                    id='fade-button'
                    aria-haspopup='true'
                    aria-controls={open ? 'fade-menu' : undefined}
                    aria-expanded={open ? 'true' : undefined}
                    onClick={handleClick}
                >
                    <Icon color='primary' fontSize='medium'>add</Icon>
                </IconButton>
            </CustomTooltip>
            <Menu
                id='fade-menu'
                MenuListProps={{
                    'aria-labelledby': 'fade-button',
                }}
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                PaperProps={{
                    elevation: 0,
                    sx: {
                        '& .MuiAvatar-root': {
                            height: 32,
                            ml: -0.5,
                            mr: 1,
                            width: 32
                        },
                        '&:before': {
                            bgcolor: 'background.paper',
                            content: '""',
                            display: 'block',
                            height: 10,
                            position: 'absolute',
                            right: 14,
                            top: 0,
                            transform: 'translateY(-50%) rotate(45deg)',
                            width: 10,
                            zIndex: 0
                        },
                        filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
                        ml: 1.6,
                        mt: 0.4,
                        overflow: 'visible'
                    }
                }}
            >
                {menuOptions.map(m => (<MenuItem onClick={() => handleClose(m)} key={m}>{m}</MenuItem>))}
            </Menu>
        </div>
    )
}

I have removed <Tooltip> from the menuOption component and added in another component by wrapping <span> element in the following way and its working.

Option Menu Component:

export default function FadeMenu() {
    const [ anchorEl, setAnchorEl ] = React.useState(null)
    const open = Boolean(anchorEl)

    const handleClick = event => {
        setAnchorEl(event.currentTarget)
    }

    const handleClose = option => {
        setAnchorEl(null)
    }

    return (
        <div style={{alignItems: 'center', display: 'flex'}}>
            <IconButton
                aria-label={'more'}
                id='fade-button'
                aria-haspopup='true'
                aria-controls={open ? 'fade-menu' : undefined}
                aria-expanded={open ? 'true' : undefined}
                onClick={handleClick}
            >
                <Icon color='primary' fontSize='medium'>add</Icon>
            </IconButton>
            <Menu
                id='fade-menu'
                MenuListProps={{
                    'aria-labelledby': 'fade-button',
                }}
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                PaperProps={{
                    elevation: 0,
                    sx: {
                        '& .MuiAvatar-root': {
                            height: 32,
                            ml: -0.5,
                            mr: 1,
                            width: 32
                        },
                        '&:before': {
                            bgcolor: 'background.paper',
                            content: '""',
                            display: 'block',
                            height: 10,
                            position: 'absolute',
                            right: 14,
                            top: 0,
                            transform: 'translateY(-50%) rotate(45deg)',
                            width: 10,
                            zIndex: 0
                        },
                        filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
                        ml: 1.6,
                        mt: 0.4,
                        overflow: 'visible'
                    }
                }}
                // TransitionComponent={Fade}
            >
                {menuOptions.map(m => (<MenuItem onClick={() => handleClose(m)} key={m}>{m}</MenuItem>))}
            </Menu>
        </div>
    )
}

other compoenent:

import IconMenu from './menu-option'

<CustomTooltip title={'Add Request'} placement={'top'} arrow>
    <span><IconMenu/></span>
</CustomTooltip>