Angular 14 complains that a property on my observable object does not exist

So I have declared:

 public userEmail?: Observable<LoggedInUser | null>;

then in my ngOnInit() I have:

this.Authstate.dispatch(unencryptEmail({ email: this.userKey }));

then in my ngAfterContentInit() I have:

this.userEmail = this.Authstate.select(selectUserInfo);

The premise is that a user has forgotten their password, an email gets sent with a link that includes their e-mail encrypted. So when they hit the link I first get the encryption from query params and unencrypt it in ngOnInit(). I then attempt to get the email from my state object to display it on the page.

my page has:

<div *ngIf="userEmail !== null">
    {{userEmail.LoggedInUser.email | async}}
</div>

The error states that LoggedInUser does not exist on Obervable type LoggedInUser:

export interface LoggedInUser {
  LoggedInUser: User,
  token?: string
}

my User object has the email property.

The unencrypt all works, its displaying the value passed back that is the issue.

Here is my effect:

unencryptEmail$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(fromAuthActions.unencryptEmail),
        mergeMap((auth) => {
          return this.authService.doUnencryptEmail(auth.email)
            .pipe(map((data) => { return fromAuthActions.unencryptEmailComplete({ profile: data });  }))
        })
      ),
    { dispatch: true }
  );

and my selector:

export const selectUserInfo = createSelector(
  getAuthFeatureState,
  (state: AuthState) => state.profile
);

**** Update ******

Following @Wandrille answer I changed the html bit to be:

<div *ngIf="(userEmail | async) !== null">
   hello
   {{(userEmail | async)?.LoggedInUser?.email}}
</div>

hello now displays only when the 'if' is met, but my email is not displayed. Using the redux devtools I can see that the email is populated.