State not change in observable next =( React js + Bloc Pattern + Rxjs )

I use rxjs in bloc pattern for streaming data over my application and subscribe to it from components but I have problem when i change state and get data from stream with hook . the state not correctly changed. i create a sandbox sample of my problem and appreciate to help me . CodeSandbox

problem is there

 class AppBloc extends BaseBloc<AppState> {
  addPerson(value: DataType) {
    this.stream.next({ kind: "Loading", isLoading: true });
    setTimeout(() => {
      let data: AppState = {
        kind: "Loaded",
        isLoading: false,
        data: { name: value.name, id: value.id }
      };
      this.stream.next(data);
      this.stream.next({ kind: "pending", isLoading: false });
    }, 2000);
  }
}

the log on app.tsx show me what happened to state and in incorrect way the state change from loading to pending and don't change to loaded .