Primeng custom filter using p-calendar throws error: Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Question

I'm trying to filter a table by dates, using p calendar. it all works when I have a single entry. The first issue is that the range does not appear on the calendar when selected, but the filter works fine. here is the table with no filter applied

here is the table filtered on dates Sept 5th - Sept 7th

the selected date range shows on reopening the filterbox AFTER filtering:

As you can see, this is what appears after clearing the filter to display the whole data

The second issue is that I get the following errors when selecting dates:

here is the code:

table.component.ts:

table.component.html:

I tried removing the [(ngModel)] = rangeDates from the p-calendar element in tht html (which made the selected range of dates appear at the right time, before applying the filter) but then, the filter wouldn't work on the table.