title: How do I use Menu with Collapse as my TransitionComponent on Material-ui?
body: <p>I'm having issues using the Collapse component as my TransitionComponent on Material-UI.</p>
  
  <p>Not only does it not work, it also breaks the anchor.</p>
  
  <p>Fade works fine, not sure where to look for answers.</p>
  
  <p>Thanks in advance.</p>
  
  <p><a href="https://codesandbox.io/s/7jzzyrzwk0" rel="nofollow noreferrer">Link to codesandbox</a></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { useState, useRef } from "react";
  import ReactDOM from "react-dom";
  import { Menu, MenuItem, Collapse, Fade, Typography } from "@material-ui/core";
  
  function App() {
    const [open, toggle] = useState(false);
    const ref = useRef(null);
  
    return (
      &lt;&gt;
        &lt;div style={{ position: "absolute", top: "50%" }} ref={ref}&gt;
          &lt;Typography variant="h4" className="App" onClick={() =&gt; toggle(true)}&gt;
            Click me!
          &lt;/Typography&gt;
        &lt;/div&gt;
        &lt;Menu
          TransitionComponent={Collapse}
          anchorEl={ref.current}
          open={open}
          onClose={() =&gt; toggle(false)}
        &gt;
          &lt;MenuItem&gt;Item do menu&lt;/MenuItem&gt;
        &lt;/Menu&gt;
        &lt;Menu
          TransitionComponent={Fade}
          transitionDuration={800}
          anchorEl={ref.current}
          open={open}
          onClose={() =&gt; toggle(false)}
        &gt;
          &lt;MenuItem&gt;Item do menu&lt;/MenuItem&gt;
        &lt;/Menu&gt;
      &lt;/&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>