Unexpected behaviour in combination with `react-hook-form`

[emaborsa]

I am trying to combine react-select with react-hook-form.

Here the sample.

Versions used

• "react": "18.3.1"
• "react-dom": "18.3.1"
• "react-hook-form": "7.52.0"
• "react-select": "5.8.0"

Steps to reproduce my problem:

• Select the steel version A2
• The second box now shows "On Wall A2" and "On Ladder A2". Select "On Wall A2"
• Below you see the JSON output of the selected installation type set in by the react-hook-form
• Now select the other steel version A4
• The JSON output below is removed, due to the code setValue('installationType', undefined);

Current behaviour:

• Even if the installationType of the FormBody is set to undefined, the second box still shows the old value, even if the two options are different

https://github.com/JedWatson/react-select/assets/9129912/d80182cc-6519-41f9-9533-a11df27c94cc

Expected bevaviour:

• Once the installationType of the FormBody is set to undefined, I expect the the UI shows the placeholder, since the (old) value is not present in the options.

[emaborsa]

FInally I got it, the problem are the undefined properties of the form, they have to be nullable instead, see this sample. Thanks to @"Vincent Peres" on stackoverflow.