React Async Select with react hook forms default value is not showing on the select input

[KaushikSathvara]

Discussed in https://github.com/JedWatson/react-select/discussions/5624

^{Originally posted by **KaushikSathvara** April 29, 2023} Below is code for generic selector I am using for my code: ``` import { useCallback } from "react"; import { useController } from "react-hook-form"; import AsyncCreatableSelect from "react-select/async-creatable"; import AsyncSelect from "react-select/async"; export default function GlobalSelector({ control, requestDataFunction, createDataFunction, ...rest }) { const { field: { onChange, value, name, ref, onBlur }, fieldState: { error, invalid, isTouched, isDirty }, } = useController({ name: rest.name, control }); const handleChange = useCallback( async (selectedOption) => { if (selectedOption?.__isNew__ === true && createDataFunction) { let { data } = await createDataFunction({ name: selectedOption?.label, }); onChange(data.id); } else { onChange(selectedOption?.value); } }, [createDataFunction, onChange] ); const loadOptions = async (inputValue) => { let { data } = await requestDataFunction({ search: inputValue, }); return data.results.map((result) => ({ label: result.name, value: result.id, })); }; const AsyncSelectFuntion = createDataFunction ? AsyncCreatableSelect : AsyncSelect; return ( ); } ```

[Rall3n]

@KaushikSathvara Please do not convert a discussion into an issue unless a technical problem has been identified that cannot be fixed by user implementation.