How to subscribe to an observable that is inside an interceptor in angular 15?

Question

appp.module.ts

import { AppComponent} from './app.component';
import { ManageActionsComponent } from './components/match'
import { NgModule} from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { UICInterceptor } from './modules/shared/services/inerceptor/UICInterceptor';
import { NgSelectModule } from '@ng-select/ng-select';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ErrorInterceptor } from './modules/shared/services/inerceptor/error-interceptor';

@NgModule({
declarations: [
 AppComponent,
 ManageActionsComponent,
],
imports: [
 AppRoutingModule,
 NgSelectModule,
 BrowserAnimationsModule,
],
providers: [
 {
  provide: HTTP_INTERCEPTORS,
  useClass: UICInterceptor,
  multi: true,
 },
 {
  provide: HTTP_INTERCEPTORS,
  useClass: ErrorInterceptor,
  multi: true,
 }
],
bootstrap: [AppComponent],
})
export class AppModule {}

manageActions.component.ts

errorMessage: string = '';
constructor (
 private readonly api: HttpCallsService,
 private errorInterceptor: ErrorInterceptor
){}

ngOnInit(): void {
 this.errorInterceptor.errorMessage$.subscribe(errorMessage=>{
 console.log('errorMessage in component', errorMessage);
 this.errorMessage = errorMessage;
 });
 this.retriveActions();

error-interceptor.ts

import BehaviorSubject, Observable, Subject, throwError) from 'rxjs';
import { retry, catchError, finalize} from 'rxjs/operators';
import Injectable } from '@angular/core';
import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest,
HttpErrorResponse } from '@angular/common';
@Injectable({
 providedIn: 'root'
)}
export class ErrorInterceptor implements HttpInterceptor {
constructor() {}
private errorMessage = new BehaviorSubject<string>('asdfsd');
errorMessage$ = this.errorMessage.asObservable();
intercept(
request: HttpRequest<unknown>,
next: HttpHandler
): Observable<HttpEvent<unknown>> {
 return next.handle (request).pipe(
  catchError((error: HttpErrorResponse) => {
   let errorMessage = ¹¹;
   if (error.error instanceof ErrorEvent) {
     // client-side error
     errorMessage = `Error: $[error.error.message}`;
   } else {
    // server-side error
    errorMessage = `Error Code: $[error.status}\nMessage: ${error.message}`;
    console.log('This is the value', errorMessage)
   }
   this.errorMessage.next(errorMessage);
   return throwError(()->errorMessage);
   }),
   finalize(()=> {})
   );
 }
}

I'm trying to subscribe in the manageActionComponent and show any update of the 'errorMessage' property in the html file, but the observable only takes the first value assigned in the interceptor file which in this case is '' empty string and then it doesn't update again.

I have tried setting the subscription to takeUntil(NEVER) but that doesn't work either. I have tried to setTimeout() for 100 and doesn't work either.

Am I doing something wrong? Please let me know, it's my first time working with interceptors so I might be doing some wrong.