Here is the code for reference. Although i can see the defaultValues in control of FormInputDropDown but there is no value in feild.

Everything works fine if i select the value go to other page and come back, i can see the value in the feild which it takes from defaultValues but after the initial refresh i can’t see any value in field of the Controller

const FormInputDropDown: React.FC<FormInputProps> = ({
  name,
  control,
  handleDropDownChange,
  dropDownOptionKey,
  dropDownOptions
}) => {
  const generateSingleOptions = () => {
    return dropDownOptions?.map((option: any, index) => {
      return (
        <MenuItem key={index} value={option}>
          {dropDownOptionKey ? option[dropDownOptionKey] : option}
        </MenuItem>
      );
    });
  };

  return (
    <Controller
      name={name}
      control={control}
      render={({ field }) => (
        <>
          <Select
            fullWidth
            {...field}
            onChange={e => {
              field.onChange(e);
            }}
            renderValue={selected => (dropDownOptionKey ? selected[dropDownOptionKey] : selected)}
          >
            {generateSingleOptions()}
          </Select>
        </>
      )}
    />
  );
};

export default FormInputDropDown;

interface IFormInput {
  templateType: TenantTemplate
}

const createTenant = useSelector((state: RootState) => state.createTenant);
const defaultTemplates = useSelector((state: RootState) => state.buTemplates.templates);

let assignedTemplate = createTenant?.quota?.selected_template;

if (!assignedTemplate) assignedTemplate = 'Small';

const defaultTemplate = defaultTemplates.find(template => template.template_name === assignedTemplate);

const defaultValues = {
  templateType: defaultTemplate
};

const { control } = useForm<IFormInput>({
  defaultValues: defaultValues
});

<FormInputDropDown
  name="templateType"
  control={control}
  dropDownOptions={defaultTemplates ? defaultTemplates : []}
  dropDownOptionKey="template_name"
/>