When i select a chat or “press on the mat-select-option” for the first time it doesn’t change the observable but after selecting another one and go back to the one i pressed on the first time it loads?
Can some one please help me?

ng ver: Angular 16

chatListControl = new FormControl();
messages$ = this.chatListControl.valueChanges.pipe(
    map(value => value[0]),
    switchMap((chatId) => this.chatsApi.getChatMessages$(chatId)),
    tap(() => {
      this.scrollToBottom();
      console.log(this.messages$);
    })
  );

<mat-selection-list [disableRipple]="true" hideSingleSelectionIndicator [multiple]="false"
          [formControl]="chatListControl">
          <mat-list-option *ngFor="let chat of myChats$ | async" [value]="chat.id"
            class=" w-100 msgBtn my-2 py-3 justify-content-lg-center">

            <img matListItemAvatar *ngIf="chat.chatPic != ''" [src]="chat.chatPic" class="img-fluid" />
            <img matListItemAvatar *ngIf="chat.chatPic == ''" src="assets/imgs/imgPlaceholder.jpg" class="img-fluid" />
            <!-- <div class="msg-content row col-10 justify-content-between mb-2">
              <div class="col-lg-5"> -->
            <div matListItemLine class="user-name d-flex justify-content-between">
              <span class="chat-name col-lg-6">{{chat.chatName}}</span>
              <span class="chat-date time-stamp col-lg-6 text-end">{{chat.lastMessageDate | dateDisplay}}</span>
            </div>

            <div matListItemLine class="msg-details d-flex justify-content-between">
              <span class="lastMsg col-lg-10">{{chat.lastMessage}}</span>
              <span class="msgs-count col-lg-2 text-end"><span>+9</span></span>
            </div>

          </mat-list-option>
          <div class="custom-hr"></div>
        </mat-selection-list>