How to get response body in NGRX effect if HTTP status code is 400

Question

I made an HTTP call to server and it returns HTTP status code 400 with response body as

{
    "statusCode": 400,
    "businessErrorCode": "panelmaintenanceservice.failure.0",
    "message": ""
}

How can I get the error body in my NGRX effect. Here is the code sample

 savePanelEffect$ = createEffect(() => {
    return this.actions$.pipe(
        ofType(savePanel),
        mergeMap(action => this.postPanelRequest(action).pipe(map(res => this.dispatchPanelSaved(res))))
    )
});

postPanelRequest(action: TypedAction<'[Product State] SavePanel'>) {
    this.store.dispatch(setPanelSavingState({ saving: LoadingState.Loading }));

    const payload = () => this.mapper.createPanelPayload(panel);
    const panelURL = `${this.apiBaseUrl}${environment.CREATE_SUBPANEL_API}`

    return this.http.post<any>(panelURL, payload).pipe(
        catchError(error => {
            console.log(error);
            return of(this.store.dispatch(fetchError()));
        })
    );
}

dispatchPanelSaved(response) {
    this.spinnerService.hide();

    if (!response) {
        this.store.dispatch(setPanelSavingState({ saving: LoadingState.Error }));
    }

    return setPanelSavingState({ saving: LoadingState.Done });
}

P.S: console.log(error) logs undefined.