menuPlacement not working with AsyncSelect when options changes e.g. from 0 results to 6 results

the use case is that you have a search input with autocomplete, initially there are no options but when you start to type options appear. the issue is that after more options fill the menu, the menu placement is not updated.

here is a codesandbox to reproduce

https://codesandbox.io/s/awesome-moon-8fbmtp?file=/src/App.js

and here the explanation about the codesandbox.

not working when initially no options available

initially the first request is getting an empty array as response, thats why its rendering no results. since no results fits the menu is rendered below. but after typing more options arrive, the menu is updated but the placement is not. there is not enough space and I would expect the menu to be rendered above the dropdown

https://user-images.githubusercontent.com/40763918/217791883-e94faa33-49c1-4bf7-ae7d-4f01ab9cff8c.mov

expected working when initially enough options are available

when you set the showExpected in the codesandbox to true, then the sandbox example has enough options initially. the menu is then correctly placed above the dropdown:

https://user-images.githubusercontent.com/40763918/217792355-dabab54a-690f-4143-90ea-254a64c32164.mov

Start with the linked CodeSandbox at src/App.js and reproduce the AsyncSelect case where the first response has no options and a later response has six. Trace the menuPlacement behavior during that options change. Done means the menu repositions above the dropdown when space becomes insufficient, while the showExpected case remains correctly placed.