title: Is there a way to use <Collapse> as my Transition component while using the <Popper> component to display a Menu onHover?
body: <p>The following question is regarding React and Material-UI:</p>
  
  <p>I am trying to use the <code>&lt;Collapse&gt;</code> transition component when displaying my <code>&lt;Menu&gt;</code> onMouseEnter. However, there seems to be an issue in the Material-UI library when it comes to the way the <code>&lt;Collapse&gt;</code> component and the <code>&lt;Popper&gt;</code> / <code>&lt;Popover&gt;</code> component. The issue is currently open and can be seen <a href="https://github.com/mui-org/material-ui/issues/11337" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Has anyone found a good workaround for this? Basically, I am just hoping to have a subnav Menu appear when you hover over a link with this specific transition.</p>
  
  <p>I have tried using the <code>&lt;Grow&gt;</code> component and the transition works just fine, but we specifically are trying to use the <code>&lt;Collapse&gt;</code> transition.</p>
  
  <pre><code>export const NavBarItem = ({ navItem }) =&gt; {
    const classes = useStyles();
  
    const [open, setOpen] = React.useState(false);
    const anchorRef = React.useRef(null);
  
    function handleToggle() {
      setOpen(prevOpen =&gt; !prevOpen);
    }
  
    function handleClose(event) {
      if (anchorRef.current &amp;&amp; anchorRef.current.contains(event.target)) {
        return;
      }
  
      setOpen(false);
    }
  
    return (
      &lt;React.Fragment&gt;
        &lt;Link className={classes.link} href={BASE_HOMEPAGE + navItem.path}&gt;
          &lt;Typography
            className={classes.title}
            ref={anchorRef}
            aria-controls="menu-list-grow"
            aria-haspopup="true"
            onMouseEnter={handleToggle}
            onMouseLeave={handleToggle}
          &gt;
            {navItem.title}
          &lt;/Typography&gt;
        &lt;/Link&gt;
        &lt;Popper
          open={open}
          anchorEl={anchorRef.current}
          onMouseEnter={handleToggle}
          onMouseLeave={handleToggle}
          transition
          disablePortal
          placement="bottom-start"
        &gt;
          &lt;Collapse in={open}&gt;
              &lt;Paper id="menu-list-grow"&gt;
                &lt;ClickAwayListener onClickAway={handleClose}&gt;
                  &lt;MenuList className={classes.paperMenu}&gt;
                    {navItem.menuItems.map(item =&gt; (
                      &lt;Link
                        className={classes.link}
                        href={
                          item.external ? item.path : BASE_HOMEPAGE + item.path
                        }
                      &gt;
                        &lt;MenuItem
                          className={classes.paperMenuItem}
                          onClick={handleClose}
                        &gt;
                          {item.text}
                        &lt;/MenuItem&gt;
                      &lt;/Link&gt;
                    ))}
                  &lt;/MenuList&gt;
                &lt;/ClickAwayListener&gt;
              &lt;/Paper&gt;
              &lt;/Collapse&gt;
        &lt;/Popper&gt;
      &lt;/React.Fragment&gt;
    );
  };
  
  </code></pre>
  
  <p>The code shown above is for a specific NavItem in a NavComponent. It is essentially just a dropdown component to show a subnav when you hover over a specific link.</p>
  
  <p>Thank you for your help and please let me know if you need anymore additional information.</p>