issue: unable to bind to select after I get the data from an api call

[fshahmt]

Version Number

7

Codesandbox/Expo snack

https://codesandbox.io/s/young-water-3yy6c2

Steps to reproduce

1. Go to 'https://codesandbox.io/s/young-water-3yy6c2'
2. Wait for the app to load up for the first time.
3. Click on 'reload inside the codesandbox browser'
4. The final input value gets updated after the dummy api call is done but no other fields get updated no matter if I use controller or try it without controller

Expected behaviour

All the select fields get updated since I now have the defaultValue which is actually the state variable id as well as for the input field used with the controller

What browsers are you seeing the problem on?

No response

Relevant log output

Problems consuming cache 
Error: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
Warning: `value` prop on `select` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
    at select
    at exports.Controller (https://3yy6c2.csb.app/node_modules/react-hook-form/dist/index.cjs.js:1:9693)
    at div
    at form
    at div
    at App (https://3yy6c2.csb.app/src/App.js:25:34)
Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
    at input
    at exports.Controller (https://3yy6c2.csb.app/node_modules/react-hook-form/dist/index.cjs.js:1:9693)
    at div
    at form
    at div
    at App (https://3yy6c2.csb.app/src/App.js:25:34)

Code of Conduct

• I agree to follow this project's Code of Conduct

[fshahmt]

What is the issue then? This has been moved to discussion so I suppose it's actually not an issue but that's how the documentation says it should be done?