I am working with reach hooks and to validate my form fields I am using react-hook-form as it is the best option for now

SO to validating my normal input fields I am doing just ref={register({ required: true })} then on submit it is checking for errors as I am importing errors from react-hook-form

But when I am doing same for select field it is not checking the error object

This is what I am doing

<label htmlFor="func" className="form_label">

      Select function

    </label>

    <select name="func" ref={register({ required: true })}>

      <option selected disabled>

        Select function

      </option>

      <option value="5">Function 2</option>

      <option value="6">Function 3</option>

    </select>

    {errors.func && (

      <div>

        <span>Function is required</span>

      </div>

    )}

I don't know what I am missing

My actual code is with dynamic data

so I am looping it like this

<Form.Control as="select" custom>

                    <option disabled selected>Select role</option>

                    {loading === false &&

                    data.get_roles.map((li) => (

                    <option value={li.user_type_id}> 

                    {li.user_type}</option>

        ))}

            </Form.Control>

React hook form