Creating datasource for nested object in Angular 8

I am trying my hands on Angular for a project and I am stuck with creating a data source for my MatTable.

The API that I am consuming sends response like this:

{
    data: [], //array of objects for samples
    total: 100, //total number of samples found
    pageSize: 10,
    pageIndex: 0
}

My model for samples is:

//Model for a single sample
export class Sample {
    id: number;
    name: string;
}

//a plural namespace is used for multiple samples returned from API
export class Samples {
    samples: Sample[],
    total: number;
    pageSize: number;
    pageIndex: number;
}

// a const in case no samples were found
export const NO_SAMPLES {
    total: 0,
    pageIndex: 0,
    pageSize: 0,
    samples: []
}

Now when I am trying to integrated this with a data source like below:

... //required imports
export class SamplesDataSource extends DataSource<Samples> {

private samplesSubject = new BehaviorSubject<Samples>(NO_SAMPLES);

public constructor(private samplesService: SamplesService) {
    super();
}

//this is where the error (described below) is showing
connect(collectionViewer: CollectionViewer): Observable<Samples> {
    return this.samplesSubject.asObservable();
}

disconnect(collectionViewer: CollectionViewer): void {
    this.samplesSubject.complete();
}

getSamples() {
    this.samplesService.getSamples().pipe(
        catchError(err => {
            return of([]);
        })
    ).subscribe(
        samples => this.samplesSubject.next(samples)
    );

}

}

But it shows me error message:

ERROR in src/app/shared/data-sources/samples-data-source.ts(20,5): error TS2416: Property 'connect' in type 'SamplesDataSource' is not assignable to the same property in base type 'DataSource'

How can I handle this case.

Please note, I need to retain total, pageSize and pageIndex for my paginator to work in align with the paginator at backend.

Thanks in advance.

from Creating datasource for nested object in Angular 8