title: React Hook form validation does not work on a controlled component
body: <p>I'm fairly new to react hook form. I have a custom component made on top of material ui's autocomplete. The problem is that react hook form is not validating the field whatsoever. Here's how react hook form is setup</p>
  <pre><code>type FormData = {
    eventTypes: string[];
  };
  
  const FORM_SCHEMA = yup
    .object()
    .shape({
      eventTypes: yup.array().of(yup.string()).required('Please select event type(s)'),
    })
    .required();
  
  const formInitialValues: FormData = {
    eventTypes: [],
  };
  
  const {
      handleSubmit,
      formState: { errors },
      register,
      watch,
      control,
    } = useForm&lt;FormData&gt;({ resolver: yupResolver(FORM_SCHEMA), defaultValues: formInitialValues });
  
    return (
      &lt;Controller
          name=&quot;eventTypes&quot;
          control={control}
          render={({ field, fieldState: { error } }) =&gt; (
            &lt;MultipleSelection
              {...field}
              items={['Avg. Door Time', 'Door Cycles', 'Mileage', 'Trips']}
              label=&quot;Event Type(s)&quot;
              placeholder=&quot;Select event type(s)&quot;
              required
              showAllTag
              freeSolo={false}
              error={!!error}
              helperText={!!error?.message ?? ''}
              color={error ? 'error' : 'default'}
            /&gt;
          )}
        /&gt;
    );
  </code></pre>
  <p>The <code>onChange</code> of the component works fine and on submitting the form gets the values. But the validation on the field that it shouldn't be an empty array and is required is not working.</p>
  <p>Here's how multipleSelection looks like</p>
  <pre><code>    &lt;Autocomplete
        ref={autoCompleteContainerRef}
        multiple
        disabled={disabled}
        value={value}
        classes={{
          root: classes.root,
          focused: classes.inFocus,
          popupIndicator: classes.icon,
          popper: classes.popper,
          paper: classes.paper,
        }}
        className={classes.multipleSelect}
        options={items}
        size={size}
        closeIcon={
          &lt;Icon
            component={CloseIcon}
            fontSize=&quot;small&quot;
            classes={{ root: classes.icon }}
          /&gt;
        }
        autoComplete
        onChange={(event, newValue) =&gt; {
          handleChange(newValue);
        }}
        getLimitTagsText={(more) =&gt; (
          &lt;Chip
            classes={{ root: clsx(classes.chip, classes.more) }}
            label={
              &lt;Typography noWrap variant=&quot;caption&quot;&gt;
                {`+${more} more`}
              &lt;/Typography&gt;
            }
          /&gt;
        )}
        renderTags={handleRenderTags}
        renderInput={(params) =&gt; (
          &lt;TextField
            {...params}
            {...textFieldProps}
            placeholder={isEmpty(value) ? placeholder : ''}
            className={classes.textField}
            onKeyDown={onKeyDown}
          /&gt;
        )}
        renderOption={(option, state) =&gt; (
          &lt;StyledListItem
            label={optionLabel(option)}
            selected={state.selected}
            classes={{ label: classes.label }}
          /&gt;
        )}
        {...rest}
      /&gt;
  </code></pre>
  <p>Does anyone have an idea why the validation is not working. Any help would be appreciated.</p>