title: Mui Autocomplete combined with a popper component is causing a major leak when deployed to Heroku?
body: <p>I have the following code for a v4 mui autocomplete component, the issue with it, is that the custom popper component is casing a R14, H10 errors when deploying to heroku , indicating a major memory leak, if I remove this component which servers the purpose of styling, then things works like charm, but the issue is why would this popper component cause such a hidden leak ?, took me 17h to find the cause, I tried styling the drop down using the paper component, that is located on the autocomplete as well, but it didn't give me the styling that I want.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;Autocomplete
                  id='advancedselect'
                  ref={refAutocomplete}
                  options={optionsObj}
                  groupBy={(option: any) =&gt; option.name}
                  getOptionLabel={(option) =&gt; option.name}
                  renderOption={(option) =&gt; (
                    &lt;React.Fragment&gt;
                      &lt;div style={{ width: '12vw', maxWidth: 75, marginRight: 10 }}&gt;
                        &lt;Icons img={option.equipment} /&gt;
                      &lt;/div&gt;
                      {option.name}
                    &lt;/React.Fragment&gt;
                  )}
                  disableListWrap
                  // Popper disabeled every thing works fine 
                  PopperComponent={(props: any) =&gt; &lt;Popper {...props} className={classes.propper}   placement='bottom'&gt;&lt;/Popper&gt;}
                  inputValue={selected.exercise}
                  onInputChange={handleAutoComplete}
                  className={classes.root}
                  renderInput={(params) =&gt; (
                    &lt;TextField
                      error={err.exercise ? true : false}
                      onChange={handleTextField}
                      {...params}
                      InputLabelProps={{ shrink: false }}
                      label={selected.option}
                    /&gt;
                  )}
                /&gt;</code></pre>
  </div>
  </div>
  
  After long search apparently the rendered item is not getting garbage collated properly I found some solutions but I need help implementing them since I think that is the right way to stop the memory leak from happening</p>
  <p>below is the logic for garbage collation yet not working</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  const [anchorEl, setAnchorEl] = React.useState(null);
  
    const handleClick = (event: any) =&gt; {
      setAnchorEl(anchorEl ? null : event.currentTarget);
    };
  
    const popperRefObject = React.useRef(null);
  
    React.useEffect(() =&gt; {
      popperRefObject &amp;&amp; console.log(popperRefObject.current);
    }, [anchorEl]);
  
    console.log(anchorEl);
    
    // Adding ref to to the popper 
    &lt;Popper
                open={Boolean(anchorEl)}
                anchorEl={anchorEl}
                popperRef={popperRef}
                ref={popperRefObject}
                // keepMounted
                {...props}
                className={classes.propper}
                placement='top'
              &gt;&lt;/Popper&gt;</code></pre>
  </div>
  </div>
  </p>