react-hook-form with react select

Question

Someone has a working sample with a react-hook-form with a react-select? In below the Select with id="accountId" works. However I need it to be a required field. I tried adding:

innerRef={register({ required: true })}

But that did not work. AFAIK this is because the Select needs to be wrapped in a Controller (correct me if I am wrong).

So I tried adding the Controler where id="accountId2". But now I get error:

Uncaught TypeError: Cannot read property 'split' of undefined

I am looking for a small sample where the Select will be integrated with the form and required fields.

<Container>
    
  <Form onSubmit={handleSubmit(onSubmit)}>
  <FormGroup>
    
    <div>
      <Controller
        as={<Select
          name="accountId2"
          id="accountId2" />}
        options={options}                    
        control={control}            
      />
    </div>
  </FormGroup>

  <FormGroup>
    <Label for="exampleCheckbox">Choose account to update</Label>
    <div>
      <Select
        name="accountId"
        id="accountId"
        innerRef={register({ required: true })}
        isDisabled={isNewAccount}
        ref={selectInputRef}
        isClearable={true}
        placeholder="Search for an existing account number or click new account below"
        label="Single select"
        options={options}
        defaultValue=""
      />
    </div>
    

Answer 1

Yes, In order for Select to work with RHF, you need to wrap it in a controller like this.

                <Controller
                  as={
                    <Select>
                      {options.map((option, index) => (
                        <MenuItem key={index} value={option}>
                          {option}
                        </MenuItem>
                      ))}
                    </Select>
                  }
                  name={options_name}
                  control={control}
                  defaultValue=""
                  rules={{ required: true }}
                />

So it worked for me by adding the following attribute to the controller.

rules={{ required: true }}

Hope this answers your question.

Answer 2

If you are using react-hook-form: "^7.19.1", can be used as below.

                         <Controller
                            control={control}
                            name="test"
                            render={({
                                field: { onChange, onBlur, value, name, ref },
                                fieldState: { invalid, isTouched, isDirty, error },
                                formState,
                            }) => (
                                <Select
                                    onBlur={onBlur}
                                    onChange={onChange}
                                    inputRef={ref}
                                    className={classes.textField}
                                    fullWidth
                                    input={<Input id="name" />}
                                    defaultValue={"science"}
                                >
                                    {tags.map((tag, index) => (

                                        <MenuItem key={index} value={tag}>
                                            {tag}
                                        </MenuItem>
                                    ))}

                                </Select>
                            )}
                        />