Select component not working with react-hook-form ref should be forward to input instead on styled box

<Select /> ref should be forward to input instead of <Box />

Expected Behavior

React-hook-form use ref to register input fields. When submitting form <Select .../> selected value should be in the form data

Actual Behavior

Select property value is missing from data received into onSubmit function

URL, screen shot, or Codepen exhibiting the issue

https://codesandbox.io/s/amazing-driscoll-m08if

Steps to Reproduce

Fill all the fields in the form and submit

[Alkindi42]

Hello,

You can use Controller component:

<Controller
  name="gender"
  control={control}
  defaultValue="Female"
  render={({ onChange, value }) => (
    <FormField
      htmlFor="gender"
      label="Gender"
      error={errors.gender && errors.gender.message}
    >
      <Select
        name="gender"
        defaultValue={value}
        options={["Female", "Male"]}
        onChange={({ option }) => onChange(option)}
        />
      </FormField>
  )}
/>

It’s not a perfect solution but it works.

[disbelief]

Thanks so much @Alkindi42! A few tweaks to your snippet got it working for me. I’ll post my slightly modified version here (maybe a recent change to react-hook-form API is the reason for the difference):

const options = [
  { label: 'brown', value: '1' },
  { label: 'blond', value: '2' },
  { label: 'grey', value: '3' },
  { label: 'blue', value: '4' },
];

return (
  <Controller
    name="hairColor"
    control={control}
    render={({ field: { name, value, onChange }, fieldState }) => (
      <Select
        {...fieldState}
        name={name}
        options={options}
        value={value}
        labelKey="label"
        valueKey={{ key: 'value', reduce: true }}
        onChange={({ value: nextValue }) => onChange(nextValue)}
      />
    )}
  />
);