Register third party- custom component with react-hook-form

Question

I am using react-hook-form and using third party DatePicker. Since it's a custom component using it as a controlled component to register it. This works fine

<Controller
    control={control}
    name="reviewStartDate"
    render={({ field: { onChange, onBlur, value } }) => (
        <DatePicker
            className={`form-control ${errors.reviewStartDate ? 'is-invalid' : ''}`}
            customInput={<input />}
            wrapperClassName="datePicker"
            onChange={onChange}
            onBlur={onBlur}
            selected={value ? new Date(value) : ''}
            dateFormat='dd-MMM-yyyy'
        />
    )}
/>

Similarly/however, I am using thirdparty Multiselect. Here the value is not being registered. It does show the selected value but when I submit the form the value is not present in data.

<Controller
    control={control}
    name="rootCauseAnalysisCategory"
    render={({ field: { value } }) => (
        <Multiselect
            options={rootCauseAnalysisCategorys}
            isObject={false}
            showCheckbox={true}
            hidePlaceholder={true}
            closeOnSelect={false}
            selectedValues={value}
        />
    )}
/>

Similarly

Answer 1

The <MultiSelect /> component has onSelect and onRemove props, so you can just pass onChange to them. This will work because they both have the signature that the first argument is an array containing the current selected values.

<Controller
  control={control}
  name="rootCauseAnalysisCategory"
  defaultValue={[]}
  render={({ field: { value, onChange } }) => (
    <Multiselect
      options={rootCauseAnalysisCategorys}
      isObject={false}
      showCheckbox={true}
      hidePlaceholder={true}
      closeOnSelect={false}
      onSelect={onChange}
      onRemove={onChange}
      selectedValues={value}
    />
  )}
/>

UPDATE

If you want to access the current value for rootCauseAnalysisCategory, you have to use watch. Please note, that it is also important to either provide a defaultValue at the <Controller /> field level or call useForm with defaultValues. In the example i passed the defaultValue at the field level.

function App() {
  const { control, handleSubmit, watch } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };

  const rootCauseAnalysisCategorys = ["Category 1", "Category 2"];

  const rootCauseAnalysisCategory = watch("rootCauseAnalysisCategory");

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          control={control}
          name="rootCauseAnalysisCategory"
          defaultValue={[]}
          render={({ field: { value, onChange } }) => (
            <Multiselect
              options={rootCauseAnalysisCategorys}
              isObject={false}
              showCheckbox={true}
              hidePlaceholder={true}
              closeOnSelect={false}
              onSelect={onChange}
              onRemove={onChange}
              selectedValues={value}
            />
          )}
        />

        {rootCauseAnalysisCategory?.includes("Category 1") && <p>Category 1</p>}

        <input type="submit" />
      </form>
    </div>
  );
}