Can anyone let me know why my function isnt pulling the capital or income at all and region is not getting pulled correctly?

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { WorldBankApiService } from './world-bank-api.service';
import { WorldMapComponent } from './world-map/world-map.component';
interface CountryInfo {
name: any;
capitalCity: any;
region: any;
income: any;
latitude: any;
longitude: any;
}
u/Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent implements AfterViewInit {
  u/ViewChild(WorldMapComponent) worldMapComponent!: WorldMapComponent;
title = 'angulartask';
data: CountryInfo = {
name: '',
capitalCity: '',
region: '',
income: '',
latitude: '',
longitude: '',
  };
constructor(private worldBankApiService: WorldBankApiService, private el: ElementRef) {}
ngAfterViewInit() {
this.el.nativeElement.querySelectorAll('path').forEach((path: any) => {
path.addEventListener('mouseenter', () => this.getCountryInfo(path.id));
});
  }
getCountryInfo(countryId: string) {
this.worldBankApiService.fetchCountryInfo(countryId).subscribe((resp: any) => {
const country: CountryInfo = resp[1][0];
this.data = { ...country };
});
  }
}

<div class="container"> <div class="worldMap"> <app-world-map></app-world-map> </div> <div class="infoColumn"> <h1>Country Information:</h1> <div \*ngIf="data.name !== ''"> <p>Name: {{ data.name }}</p> <p>Capital: {{ data.capitalCity }}</p> <p>Income: {{ data.income }}</p> <p>Region: {{ data.region }}</p> <p>Latitude: {{ data.latitude }}</p> <p>Longitude: {{ data.longitude }}</p> </div> </div> </div>

on my api page i have:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
const WORLD_BANK_API_URL = 'http://api.worldbank.org/v2/country/';
@Injectable({
providedIn: 'root'
})
export class WorldBankApiService {
constructor(private http: HttpClient) {}
public fetchCountryInfo(_countryId: string): Observable <any> {
const wbUrl = `${WORLD_BANK_API_URL}${_countryId}?format=json`;
return this.http.get(wbUrl);
  }
}