title: React Material-UI Popper - popper ref doesn't work
body: <p>I'm trying to achieve behaviour that when the popper is open and it's bottom exceeding the window bottom, it's placement will be change (from 'right' to 'right-end').</p>
  <p>I think to get the bottom position from the ref, and see if it passed the bottom. problem is, what ever i try the ref.current is null.</p>
  <p>these is what i tried so far:</p>
  <ol>
  <li>passing ref object to the Popper component props ref and popperRef. on useEffect current came out null.</li>
  <li>passing ref object to the div the popper wraps. same, on useEffect the current property came null.</li>
  <li>passing callback to the popper ref/popperRef-props, and to the div it wraps. the ref callback isn't invoked, when it mounts.</li>
  </ol>
  <ul>
  <li>i did notice that the useEffect is executed before the popper is shown on the screen.</li>
  </ul>
  <p><strong>Popper component - example of passing callback to ref to the wrapped div</strong></p>
  <pre><code>const customPopper = ({
   popperRef = (popperElement) =&gt; {}
  }) =&gt; {
    const useStyles = makeStyles({
      Popper: { ...popperStyle, ['z-index']: '9999' }
    })
    const styles = useStyles();
  
    return (
      &lt;Popper
        className={styles.Popper}
        placement={placement}
        open={open}
        anchorEl={anchorEl}
      &gt;
        &lt;ClickAwayListener onClickAway={handleClickAway}&gt;
  
          &lt;div ref={popperRef}&gt;
  
            &lt;CalendarPopover
              className={st(classes[calendarPopoverClass], { isMobile })}
              isShown
              withArrow={false}
              title={title}
              onClose={handleCloseClick}
            &gt;
              {children}
            &lt;/CalendarPopover&gt;
          &lt;/div&gt;
        &lt;/ClickAwayListener&gt;
      &lt;/Popper &gt;
    )
  </code></pre>
  <p><strong>Parent component ref handler</strong></p>
  <pre><code> const popperRefHandler = (popperRef: React.MutableRefObject&lt;HTMLDivElement&gt;) =&gt; {
      const popperBottom = popperRef.current.getBoundingClientRect().bottom;
      console.log('hello from popper mount in agenda cell, popper-bottom: ', popperBottom);
  
    }
  </code></pre>
  <p><strong>EDIT 1 - Sandbox Example</strong></p>
  <p><a href="https://codesandbox.io/s/material-ui-issue-forked-zy11e?file=/src/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/material-ui-issue-forked-zy11e?file=/src/index.js</a></p>