Controller would not set defaultValue

[OptimusBlack]

Hi all,

I am having trouble with the defaultValue prop for Controller. It doesn't do anything.
Here is the interface of my form fields

interface FormFields {
  deploymentId: number;
  configurations: {
    [key: string]: {
      default: Array<string>;
      custom: Array<{ key: string; value: string }>;
    };
  };
}

Following is the controller I wrote. Everything works fine except that it doesn't set the default value. Note that the SelectDropdown is a custom component that just extends ReactSelect.

<Controller
        name={`${name}.default`}
        control={control}
        defaultValue={deploymentApplication?.envVariables ?? []}
        render={({ field }) => (
          <SelectDropdown
            options={edpDeploymentAppEnvVariables.map((e) => ({ value: e, label: e }))}
            menuListMaxHeight="200px"
            onChange={(v) => {
              field.onChange(v.map((val) => val.value))
            }}
            defaultValue={deploymentApplication?.envVariables?.map((e) => ({ value: e, label: e })) ?? []}
            isMulti
            label={t('keys.assign.form.header.systemvariables', 'System environment variables')}
            isDisabled={disabled}
          />
        )}
      />

[fahadsohail482]

@OptimusBlack can you share this on code sandbox?