Creating a form control after an API call

Question

I am working with angular and I have created a custom validator that checks if an input has a value from a drop-down, If the value inside the input is not one in the list then the validator should throw an error.

This is my implementation but I am a bit hesitant about how I am initializing the form control.

// populating states on loading of the component
    regionsByApi()
      .then((response) => {
        this.states = response.data.map((item) => {
          return {
            key: this.titleCase.transform(item),
            value: this.titleCase.transform(item),
          };
        });
        this.stateFormControl.setValidators([
          Validators.required,
          autoCompleteSelectValidator(this.states),
        ]);
        this.stateFormControl.setValue('California', { onlySelf: true });
      })
      .catch(() => {
        Notify.failure(`Oops webpage did't load properly, reload again.`);
      });

Custom validator

export const autoCompleteSelectValidator = (
  options: Options[]
): ValidatorFn => {
  return (control: AbstractControl): { [key: string]: boolean } | null => {
    const val = options.some((item) => {
      if (item.key.toLowerCase() === control.value.toLowerCase()) return true;
      return false;
    });
    console.log(val);
    if (!val) return { validAutoCompleteOption: true };
    else return null;
  };
};

Please review and advise!