field list is not mapped correctly on http get angular

Question

So I have this component where I need some questions (I call getQuestions on ngInit and I use a service for the http call). Now my problem is that in my html I display the title of the questions and it works just fine. But the tag list of the question is always empty/undefined.

The json I get from calling the endpoint is:

[
    {
        "title": "Equivalent of Super Keyword in C#",
        "tags": [
            {
                "tagID": "1",
                "tagName": "#dumpQuestion"
            },
            {
                "tagID": "2",
                "tagName": "#prayForMe"
            }
        ],
        "username": "alex",
        "text": "What is the equivalent c# keyword of super keyword (java).",
        "creationTime": "2022-03-04T20:00:00",
        "upVote": 0,
        "downVote": 0,
        "voteCount": 0
    },
    {
        "title": "Javascript usage",
        "tags": [
            {
                "tagID": "1",
                "tagName": "#dumpQuestion"
            },
            {
                "tagID": "2",
                "tagName": "#prayForMe"
            }
        ],
        "username": "andrei",
        "text": "is javascript for frontend or backend?",
        "creationTime": "2022-03-08T15:00:00",
        "upVote": 0,
        "downVote": 0,
        "voteCount": 0
    },
  
]

The component where I need my questions:

import { Component, OnInit } from '@angular/core';
import { EntriesService } from '../entries.service';
import { IQuestion } from '../models/IQuestion';

@Component({
  selector: 'app-question-display',
  templateUrl: './question-display.component.html',
  styleUrls: ['./question-display.component.css']
})
export class QuestionDisplayComponent implements OnInit {

  constructor(private entriesService: EntriesService) { }

  readonly baseUrl = 'https://localhost:44380/googleIt/';
  questions: IQuestion[];

  ngOnInit(): void {
    this.getQuestions();
   
  }

  getQuestions(): void {
    this.entriesService.getQuestions(this.baseUrl + 'entries/questions')
      .subscribe(data => this.questions = data);
  }

the service is

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { IQuestion } from './models/IQuestion';
import { pipe } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class EntriesService {
  constructor(private http: HttpClient) { }

  public getQuestions(url: string): Observable<IQuestion[]> {
    return this.http.get<IQuestion[]>(url).pipe(map(questions => questions.map(question => {
    
      return {
        username: question.username,
        text: question.text,
        CreationTime: question.CreationTime,
        UpVote: question.UpVote,
        downVote: question.downVote,
        title: question.title,
        tags: question.tags
      };

    })));
  }
}

Iquestion class is

import { ITag } from './ITag';

export interface IQuestion {
  username: string;
  text: string;
  CreationTime: number;
  UpVote: number;
  downVote: number;
  title: string;
  tags: ITag[];
}
       

and Itag

export interface ITag {
  tagID: number;
  name: string;
}

<style>
  div {
    background-image: url("../../assets/justGoogleIt.jpg");
    width: 100%;
    height: 300px;
  }
</style>
<div>
  <h1>Questions currently solved:</h1>
  <p>{{questions[0].title.tags[0].name}}</p>
</div>
<app-question *ngFor="let question of questions" [question]="question" ></app-question>

in the component with the selector app-question I display the title and text of the question and works just fine. Tried printing in a paragraph the first tag name of the first question but with no luck (nothing is displayed)