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

[KaushikSathvara]

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 (
    <AsyncSelectFuntion
      {...rest}
      menuPortalTarget={document.querySelector("body")}
      defaultOptions
      isClearable
      name={name}
      // value={selectedValue?.id}
      value={value?.id}
      onChange={handleChange}
      loadOptions={loadOptions}
    />
  );
}

[manjushsh]

Hi @KaushikSathvara, can you please share a reproducible code sandbox link? I will take a look at it

[KaushikSathvara]

Sure I'll share

[KaushikSathvara]

https://codesandbox.io/p/sandbox/upbeat-rosalind-7c91ub

[KaushikSathvara]

I just want to get selected value if I default value provided

[KaushikSathvara]

@manjushsh let me know if you need further details