Angular 16 Material Table dataSource doesn't accept declarative RxJS Object[]

Question

Issue: Angular/Material Table doesn't like my dataSource and throws this error:

error TS2322: Type 'ReturnedDataList[] | null' is not assignable to type 'CdkTableDataSourceInput<ReturnedDataList.>'.

I am retrieving data from a backend service with declarative RxJS that I am trying to use as the datasource for my Material Table.

Please ignore variable names as I had to change them for this post.

We grab the data and map it down to an Object Array like so:

handleData$ = this.dataService.retrieveData$
    .pipe(
      map(dataList=> dataList.fakeObject.baseFakeObject?.returnedDataList?? [])
    );

So now handleData$ is of type Observable<ReturnedDataList[]>

Then, we pass that through as an @Input to our table.component.ts like so:

home.component.html

<app-table [dataSource$]="handleData$"></app-table>

and in our table.component.ts we have this:

@Input()
  dataSource$: Observable<ReturnedDataList[]>;

The data is all retrieved fine, but when I try to add it to our Material Table DataSource Like so:

 <table mat-table [dataSource]="dataSource$ | async">

I get this error during compile time:
error TS2322: Type 'ReturnedDataList[] | null' is not assignable to type 'CdkTableDataSourceInput'.

This is my first time working with a material table.

I've found this Here but for some reason it's not working to try to do it async?

Any help would be appreciated.