Why is the list not rendering?

Question

JavaScript

Guys hello everyone. Help me please!
there is such a component

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import * as fromUser from '../store/user.reducers';
import * as UserActions from '../store/user.actions';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  public followersState$: Observable<fromUser.State>;

  constructor(private store: Store<fromUser.FeatureState>) {}

  ngOnInit() {
    this.store.dispatch(new UserActions.fetchUserFollowers());
  }

  private getUserFollowers(): void {
    this.followersState$ = this.store.select('followers');
    console.log(this.followersState$);
  }
}

its html

<div class="user">
  <button class="btn" (click)="getUserFollowers()">User's followers</button>
  <ul>
    <li *ngFor="let follower of (followersState$ | async)?.followers">
      {{ follower }}
    </li>
  </ul>
</div>

there is a local store

import { Action } from '@ngrx/store';

export const FETCH_USER_FOLLOWERS = 'FETCH_USER_FOLLOWERS';
export const SET_USER_FOLLOWERS = 'SET_USER_FOLLOWERS';

export class fetchUserFollowers implements Action {
  readonly type = FETCH_USER_FOLLOWERS;
}

export class setUserFollowers implements Action {
  readonly type = SET_USER_FOLLOWERS;

  constructor(public payload: any[]) {}
}

export type userActions = fetchUserFollowers | setUserFollowers;

import * as userActions from './user.actions';
import * as fromRoot from '../../store/root.reducers';

export interface FeatureState extends fromRoot.State {
  followers: State;
}

export interface State {
  followers: any[];
}

const initialState: State = {
  followers: []
};

export function userFollowersReducer(
  state = initialState,
  actions: userActions.userActions
) {
  switch (actions.type) {
    case userActions.SET_USER_FOLLOWERS:
      return {
        ...state,
        followers: [...actions.payload]
      };
    default:
      return state;
  }
}

import { Injectable } from '@angular/core';
import { Actions, Effect } from '@ngrx/effects';
import { switchMap, map } from 'rxjs/operators';
import { HttpClient, HttpRequest } from '@angular/common/http';

import * as UserActions from './user.actions';

@Injectable()
export class userEffects {
  @Effect()
  userFollowersFetch = this.actions$
    .ofType(UserActions.FETCH_USER_FOLLOWERS)
    .pipe(
      switchMap((action: UserActions.fetchUserFollowers) => {
        return this.httpClient
          .get('https://api.github.com/users/mosh-hamedani/followers', {
            observe: 'body',
            responseType: 'json'
          })
          .pipe(
            map(userFollowers => {
              console.log(userFollowers);
              return {
                type: UserActions.SET_USER_FOLLOWERS,
                payload: userFollowers
              };
            })
          );
      })
    );

  constructor(private actions$: Actions, private httpClient: HttpClient) {}
}

there is also a global store

import { ActionReducerMap } from '@ngrx/store';

import * as fromUser from '../user/store/user.reducers';

export interface State {
  user: fromUser.State;
}

export const reducers: ActionReducerMap<State> = {
  user: fromUser.userFollowersReducer
};

Why followers may not be rendered, although they are displayed in the console
Here it was reproduced https://stackblitz.com/edit/angular-w4udtn