Angular ngOnInit the object property is always undefined despite the the object has value

I have an angular project and currently I am trying to set a reactive form values on ngOnInit method. I get the data with http call from a backend server. In the ngOnInit method I can monitor data on browser console; but the properties of the data object are always undefined despite the objects have this properties with proper values.

Here are the interested code blocks:

 ngOnInit(): void {
    this.clientService.getClientBusinessYearDetails(this.clientBusinessYearId).subscribe(data  => {
         console.warn(data);
         console.warn(data.clientName);
         this.organizationDetailsFormValues.contactPerson = data?.clientName;
         this.clientProfileForm.controls.organizaionDetails.setValue(this.organizationDetailsFormValues);
    });
  }

You can see the details on the screen shot of browser console, the data object has a proper clientName property but it is showing up null when I try to using it in somewhere else:

The form that I want to set it's value is a reactive form which has several child form groups from inner components. I have simplified the ngOnInit method on purpose to read it easier. when I set a control of form as hardcoded it is working and the value showing up on form but when I set the control's value as above it is not showing up because the property value is undefined.

Any Idea ? I have checked this question which quite similar but my goal is not showing the property's value on console.

data is an array, just assign values of first element of this array.

 ngOnInit(): void {
    this.clientService.getClientBusinessYearDetails(this.clientBusinessYearId).subscribe(data  => {
         console.warn(data);
         console.warn(data[0].clientName);
         this.organizationDetailsFormValues.contactPerson = data[0]?.clientName;
         this.clientProfileForm.controls.organizaionDetails.setValue(this.organizationDetailsFormValues);
    });
  }