Setting a state in onChange resets focus on options to the first element

[SetupCoding]

Reproduction Repository:

https://github.com/SetupCoding/react-select-test-vite

Steps to Reproduce:

1. Clone the repository and run npm install.
2. Start the development server using npm run dev.
3. Navigate to localhost:5173.
4. Interact with the react-select component using the keyboard:
   1. Press the arrow down key twice to highlight the second option (“Battery Powered Tools”).
   2. Press the space or enter key to select the second option.
5. Observe that the focus moves back to the first element (“Top Picks”) again. This behavior repeats every time any other element is selected or deselected.

Video of Reproduction

Keyboard interaction:
https://github.com/user-attachments/assets/839b1b83-de61-4889-bbe0-53303d6cfcbb

Mouse interaction:
https://github.com/user-attachments/assets/9142d7ad-d4a6-4745-9f4d-844ef7f6cc56

Additional Observations:

• When using the mouse to select an option other than the first (“Top Picks”), the first option “steals” the hover effect until the mouse is slightly moved to reset the hover effect to the correct element.
• If you don’t set the state in the handleComboboxChange function, the focus remains on the selected element, and the arrow keys work as expected.

Note:

• This issue does not occur when running the component in CodeSandbox, but it does occur in Create React App (CRA) and Vite (tested in two separate freshly initialized projects).

Many thanks in advance!