title: In my React application, I'm using a popover component from material ui. Hovering over the icon does not open the popover
body: <p>I'm having trouble figuring this out.  My I've implemented a popover component, where, when the user hovers over an 'i' icon, a popover should open, when the user hovers away from the icon, it should close the popover.  What I think is happening is that while hovering over the icon, the open and close methods are constantly being called so it looks like its never being opened.</p>
  
  <p>My component:</p>
  
  <pre><code>export const InfoIconWrapper = styled(InfoIcon)(({ theme }) =&gt; ({
    color: fade(theme.palette.black, 0.3),
  }));
  
  export const GridWrapper = styled(Grid)(({ theme }) =&gt; ({
    pointerEvents: 'none',
    padding: theme.spacing(1),
  }));
  
  const DistributionLinePopover = ({ distributionLine }) =&gt; {
    const [anchorEl, setAnchorEl] = useState(null);
  
    const handlePopoverOpen = event =&gt; {
      setAnchorEl(event.currentTarget);
    };
  
    const handlePopoverClose = () =&gt; {
      setAnchorEl(null);
    };
  
    const open = Boolean(anchorEl);
    const mouseOverPopover = 'mouse-over-popover';
    return (
      &lt;Fragment&gt;
        &lt;Typography
          aria-owns={open ? mouseOverPopover : undefined}
          aria-haspopup="true"
          onMouseEnter={handlePopoverOpen}
          onMouseOut={handlePopoverClose}
        &gt;
          &lt;InfoIconWrapper fontSize="small" /&gt;
        &lt;/Typography&gt;
        &lt;Popover
          id={mouseOverPopover}
          open={open}
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'left',
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'left',
          }}
          // onMouseOut={handlePopoverClose}
          disableRestoreFocus
        &gt;
          &lt;GridWrapper container&gt;
           ...
          &lt;/GridWrapper&gt;
        &lt;/Popover&gt;
      &lt;/Fragment&gt;
    );
  };
  </code></pre>
  
  <p>How can I modify this code to make it behave as expected?  Originally I tried passing handlePopoverClose to popover, but that makes it so the popover closes only if you hover over the actual popover instead of hovering away from the 'i' icon.</p>