How to forwardRef selected value from React-Select to react-hook-form

Viewed 4457

I'm using react-hook-form and trying to get selected value from custom react-select component, by following the guide: UseFormMethods.

The problem is that no value is being passed to the form.

Im doing the following:

interface Option {
  label: string;
  value: string;
}

interface Props {
  name: string;
  options: Option[];
  error?: string;
  label?: string;
  placeholder?: string;
  disabled?: boolean;
  clearable?: boolean;
}

const MySelect = React.forwardRef<ReactSelect, Props>(
  (
    { name, error, options, label, placeholder, disabled, clearable, ...rest },
    ref
  ) => (
    <>
      {label && <label htmlFor={name}>{label}</label>}
      <ReactSelect
        id={name}
        name={name}
        ref={ref}
        options={options}
        placeholder={placeholder || ""}
        isDisabled={disabled}
        isClearable={clearable}
        {...rest}
      />
      {error && <span>{error}</span>}
    </>
  )
);

export default MySelect;

Full code in codesandbox. Can anyone help me?

1 Answers
Related