In my react app, I have a Notification button from mui on hover, it opens popover, but does not close the popover when hover away

Question

In my react app, I have the Notification icon from mui, on hover of Notification icon , I want the popover to open and when I hover away from it, it should close the popover. However, it is not closing the popover when hover away, it closes the popover when the hover out of the screen. I tried style={{pointerEvents:'none'}}, but then it does not interacts with the popover.

 <Box
      sx={{ position: 'relative' }}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <IconButton
        color="inherit"
        onClick={handleNotificationIconClick}
        sx={{ color: 'black', cursor: 'pointer', height:50, width:50 }}
      >
        <Badge
          badgeContent={options.filter(option => option.unreadCount > 0).length}
          color="error"
          showZero={false} 
        >
          <NotificationsIcon />
        </Badge>
      </IconButton>

      <Popover
        open={Boolean(anchorEl)}
        anchorEl={anchorEl}
        onClose={handleMenuClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: -2,
          horizontal: 'center',
        }}
        sx={{
          '& .MuiPaper-root': {
            border: '1px #ccc',  
            borderRadius: '16px', 
            boxShadow: 1, 
          },
        }}
        // style={{ pointerEvents: 'none' }}
        
        disableRestoreFocus
        onClick={() => handleMenuClose()}
        slotProps={{
          paper:{
            onMouseEnter: handlePopoverOpen,
            onMouseLeave: handlePopoverClose,  
            
        }       
        }}
        aria-hidden={false}
      >
        <NotificationItemsList options={options}/> 
      </Popover>
    </Box>
//handler functions
 const handleNotificationIconClick = (e) => {
    if (!isLargeScreen) {
      const newAnchorEl = anchorEl ? null : e.currentTarget;
      setAnchorEl(newAnchorEl);
    }
  };

  const handleMouseEnter = (e) => {
    if (isLargeScreen) {
      console.log('mouse enter')
      setAnchorEl(e.currentTarget);
    }
  };

  const handleMouseLeave = (event) => {
    if (isLargeScreen) {
      console.log('mouse leave')
      handlePopoverClose(event)
      setAnchorEl(null);
    }
   
  };

  const handlePopoverOpen = () => {
    console.log('popover open')
    setAnchorEl(anchorEl); 
  };
  
  const handlePopoverClose = (event) => {
    console.log('event.relatedTarget', event.relatedTarget)
    if (
      event.relatedTarget instanceof Node &&
      (anchorEl?.contains(event.relatedTarget) || event.currentTarget.contains(event.relatedTarget))
    ) {
    
      return;
    }
    console.log('popover close')
    setAnchorEl(null); 
  };