Nothing is displayed when value is programatically set and getOptionValue is used

When getOptionValue is used, value or defaultValue still require using full object and don't respect the getOptionValue result.

const allItems: Item[] = [
  { id: 1, name: "Tesla" },
  { id: 2, name: "BMW" },
  { id: 3, name: "Audi" },
  { id: 4, name: "Mazda" }
];

  const getLabel = (item: Item) => item.name;
  const getValue = (item: Item) => item.id.toString();

And when I use

        <Select
          getOptionLabel={getLabel}
          getOptionValue={getValue}
          options={allItems}
          defaultValue={allItems[0].id.toString()}
        />

it doesn't work and doesn't select the proper value. Neither does using value property. But if I use defaultValue={allItems[0]} it works - so it seems it doesn't respect the usage of getOptionValue.

Normally, I would use something like allItems.find(item => item.id.toString() === selectedId), but that is not possible to use in AsyncSelect, since I don't have access to loaded options.

(I'm trying to use react-select with react-hook-forms and I have noticed these issues while working on this integration. Here is more detailed example: https://codesandbox.io/s/admiring-monad-tq2er?file=/src/App.tsx )

Start by reproducing the issue with the Select example and the linked CodeSandbox, then trace how Select and AsyncSelect resolve value and defaultValue when getOptionValue is supplied. Done means an option is selected from its id string in both the regular and asynchronous cases, with coverage for the reported behavior.