Selecting option with controlled input value and `controlShouldRenderValue={false}` temporarily results in blank input

We are attempting to use React Select to create a "search" input where the user can search for a given value and then select one of the returned options. When a user selects an option, we want to continue to show the value they searched for instead of showing the selected option in the input.

From my understanding, the way to do this would be something like this:

const Search = () => {
  const [inputValue, setInputValue] = useState("");

  const handleOnInput = (value, meta) => {
    if (meta.action === "input-change") {
      setInputValue(value);
    }
  };

  return (
    <Select
      options={options}
      inputValue={inputValue}
      onInputChange={handleOnInput}
      controlShouldRenderValue={false}
    />
  );
};

Here we only update inputValue when the user is typing and ignore onInputChange when the user closes the menu, selects an option, or blurs the input. We also set controlShouldRenderValue to false so that when a user clicks an option it is not rendered in the input.

However, this results in a small bug where when the user selects an option, the input temporarily displays nothing instead of the input value. Re-focusing on the input fixes the issue and displays the correct input value.

Attached are a screen recording and a code sandbox to reproduce the issue.

https://codesandbox.io/s/react-select-v5-sandbox-forked-5x4svh?file=/example.js:133-524

https://user-images.githubusercontent.com/81175351/161600698-44fd5827-b7b3-4150-a2b6-19c2e0581b01.mov

Start with the attached CodeSandbox, especially example.js lines 133-524, and reproduce the selection flow using a controlled inputValue with controlShouldRenderValue={false}. Compare the temporary blank input with the expected behavior: the searched value should remain visible immediately after selecting an option. Confirm the fix against the provided reproduction.