Cannot populate Array object coming from server

Hello there,

I have this data response from the server but I get this error

ERROR Error: Provided data source did not match an array, Observable, or DataSource
    at getTableUnknownDataSourceError (table.mjs:1024:12)
    at MatTable._observeRenderChanges (table.mjs:1763:19)
    at MatTable.ngAfterContentChecked (table.mjs:1415:18)
    at callHook (core.mjs:2508:18)
    at callHooks (core.mjs:2467:17)
    at executeCheckHooks (core.mjs:2399:5)
    at refreshView (core.mjs:12004:21)
    at detectChangesInternal (core.mjs:13187:9)
    at ViewRef$1.detectChanges (core.mjs:13659:9)
    at Object.next (purchase-list.component.ts:58:30)

Select allOpen in new window

I am expecting an array of Purchase objects and the server response looks like so

Now when I try to populate in the Purchase [] like so, I get this error.

purchaseList: Purchase[];

getPurchaseList() {
    this.purchaseService.getAllPurchase()
        .subscribe({
            next: (res: Purchase[]) => {
                this.purchaseList = res;
                console.log('this.purchaseList:::::::', this.purchaseList);
                this.cdr.detectChanges();
            },
            error: (error) => console.error('Something went wrong to get purchase List', error),
            complete: () => console.log('I am complete with getPurchaseList!!!!')
        })
}

Select allOpen in new window