kendo ui dropdownList event valueChange (Angular kendo UI)

Я использую каскадное выпадающее меню кендо(Cascading ComboBoxes) , которое имеет событие valueChange. В случае выбора жанра(Genre) следует активировать раскрывающийся список авторов(Author), и отображать соответствующий список авторов после каждого изменения. Это событие срабатывает один раз, исправить ошибку не могу. Пробовал selectionChange, тоже не работает.

Как мне исправить это?

html

<div class="container-fluid example-wrapper">
  <div class="row">
    <div class="col-xs-12 col-sm-4 example-col">
      <p>Genre:</p>
      <kendo-dropdownlist
        [data]="genreList"
        [value]="selectedGenre"
        [defaultItem]="defaultItemGenres"
        textField="genreName"
        valueField="genreId"
        (valueChange)="handleGenreChange($event)"
      ></kendo-dropdownlist>
    </div>
    <div class="col-xs-12 col-sm-4 example-col">
      <p>Author:</p>
      <kendo-dropdownlist
        [disabled]="isDisabledAuthors"
        [defaultItem]="defaultItemAuthors"
        [data]="authorList"
        [value]="selectedAuthor"
        textField="authorName"
        valueField="authorId"
        (valueChange)="handleAuthorChange($event)"
      ></kendo-dropdownlist>
    </div>
  </div>
</div>

handleGenreChange event

genreList: any = [];
authorList: any = [];

public selectedGenre = undefined;
public selectedAuthor = undefined;

handleGenreChange(value:any) {
  console.log("value=", value.target);
    
  this.selectedGenre = value;
  console.log("authorList=", this.authorList);

  if (value.genreName === this.defaultItemGenres.genreName) {
    this.isDisabledAuthors = true;
    this.authorList = [];
  } else {
    this.isDisabledAuthors = false;
    this.authorList = this.authorList.filter((s:any) => {
      return s.genreList.some((item:any)=>{
        return item.genreName === value.genreName
    })});
  }
}

handleAuthorChange(value:any) {
  this.selectedAuthor = value;
  console.log("author value=", value);
}