Automatic menu placement sometimes not correct within a scroll container

The placement calculations for automatic menu placement seem to be wrong for some cases since #5177 has been merged.

Example codesandbox:
https://codesandbox.io/s/react-select-v5-sandbox-forked-8sgyet

Steps to reproduce:

1. Have a scroll container that does not span the full window/viewport height
2. Render the near at the bottom of that scroll container
3. If the menu is opened, the MenuPlacer should let the menu flip and show on top of the select

Instead, the menu opens below, sometimes even increasing the scrollable area.

Possible cause:
https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/components/Menu.tsx#L94
The computation of viewSpaceBelow seems incorrect when the scroll container's top edge is different from the windows top edge: menuTop comes from a call to getBoundingClientRect(), which gives the top offset relative to the viewport. When located in a scroll container, menuTop should actually be the top offset of the menu relative to the scroll parent, so that the comparison with viewHeight (the scrollParent height) returns the true view space available below the select.

Not sure which computation would give better results, I think menuTop should be relative to the scrollParent, not the viewport so that other computations remain correct. So something like
const menuTop = isFixedPosition ? menuEl.getBoundingClientRect().top : menuEl.getBoundingClientRect().top - scrollParent.getBoundingClientRect().top

I'm also willing to contribute a PR, but a good solution should be discussed first.

Start in packages/react-select/src/components/Menu.tsx around line 94 and reproduce the issue using the linked CodeSandbox. Compare the viewport-based menuTop with the scroll parent coordinates described in the report. Done means the menu flips above the select near the bottom of a shorter scroll container without expanding its scrollable area.