‘value’ Property Not Available on ‘field’ Object When Using React Hook Form with CreatableSelect ReactSelect

I’m using React Hook Form to control forms in my React application. I have a component SelectCreateableInputForm which utilizes React Hook Form to manage input.

import { forwardRef, useEffect, useState } from 'react';
import Select, { GroupBase, Props, StylesConfig } from 'react-select';
import CreatableSelect from 'react-select/creatable';

import { useUncontrolled } from '@/hooks/use-uncontolled';
import { cn } from '@/lib/utils';

export const SelectCreateableInput = forwardRef<HTMLSelectElement, Props>(
  (props, ref) => {
    const { className, value, defaultValue, onChange, ...rest } = props;

    const [isMounted, setIsMounted] = useState(false);

    // eslint-disable-next-line @typescript-eslint/naming-convention
    const [_value, setValue] = useUncontrolled({
      value,
      defaultValue,
      onChange,
    });

    const handleOnChange = (newValue: unknown) => {
      setValue(newValue);
    };

    useEffect(() => setIsMounted(true), []);

    return isMounted ? (
      <CreatableSelect
        {...rest}
        ref={ref as any}
        value={_value}
        onChange={handleOnChange}
        styles={customStyles}
        className={cn(className)}
      />
    ) : null;
  }
);

SelectCreateableInput.displayName = 'SelectCreateableInput';

However, when trying to access the value property from the field object passed to the SelectCreateableInput component, the value property isn’t available in that object.

export function SelectCreateableInputForm({
  form,
  name,
  label,
  withAsterik = true,
  shouldUnregister = true,
  description,
  className,
  error,
  selectProps,
}: SelectFormProps) {
  return (
    <FormField
      control={form.control}
      name={name}
      shouldUnregister={shouldUnregister}
      render={({ field }) => (
        <FormItem className={className}>
          <FormLabel withAsterik={withAsterik}>{label}</FormLabel>
          <FormControl>
            {/* posisi selectProps harus setelah field agar onChange jalan */}
            <SelectCreateableInput
              {...field}
              {...selectProps}
              onChange={selectProps?.onChange || field.onChange}
            />
          </FormControl>
          {JSON.stringify(field)}
          <FormDescription>{description && description}</FormDescription>
          <FormMessage>{error && error}</FormMessage>
        </FormItem>
      )}
    />
  );
}

Issue Faced: When attempting to access the value property from the field object passed to the SelectCreateableInput component, the property isn’t available, even though I’ve used form.control and the value property should be there.

<SelectCreateableInputForm
            form={form}
            label="Variation Name"
            name={`variationName[${index}]`}
            selectProps={{
              isClearable: true,
              options: optionsWithDisabled,
              isSearchable: true,
              onChange: value =>
                handleChangeVarName(value as ValueOnchangeProps, index),
            }}
          />

enter image description here

I have tried using the Controller from the react hook form directly, but it still doesn’t work.

The form still gets its value, but there will be an issue if this value doesn’t exist. For example, if I change the Select component to another manually via useEffect it won’t change because the value doesn’t work.