prime Ng date filter is not working returns only an error

Question

i'm recieving data from an api which has a date and i'm using primeng table components to display this data all filters are working fine, only date filter is not working i'm using date pipe to transform the string date into a date before displaying it in the table here is the code html

<p-table #dt1 [value]="data.ticketsRecords" [paginator]="true"[rows]="10"
      [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]"
      currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
      [globalFilterFields]="['First Name','Quantity','Last Name','Date Formula']">
<ng-template pTemplate="caption">
        <div class="d-flex justify-content-between">
            <button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
            <span class="p-input-icon-left ml-auto">
                <i class="pi pi-search"></i>
                <input pInputText type="text" (input)="dt1.filterGlobal($any($event.target).value, 'contains')" placeholder="Global Search" />
              </span>
        </div>
</ng-template>
<ng-template pTemplate="header">
    <tr>
      <th>
        <div class="flex justify-content-center align-items-center">
          FirstName
          <p-columnFilter type="text" field="First Name" display="menu"></p-columnFilter>
        </div>
      </th>
      <th>
        <div class="flex justify-content-center align-items-center">
          LastName
          <p-columnFilter type="text" field="Last Name" display="menu"></p-columnFilter>
        </div>
      </th>
      <th>
        <div class="flex justify-content-center align-items-center">
          Quantity
          <p-columnFilter type="numeric" field="Quantity" display="menu"></p-columnFilter>
        </div>
      </th>
      <th>
        <div class="flex justify-content-center align-items-center">
          Purchase Date
          <p-columnFilter type="date" field="Date Formula"display="menu">
          </p-columnFilter>
        </div>
      </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rec>
    <tr>
        <td>{{rec['First Name']}}</td>
        <td>{{rec['Last Name']}}</td>
        <td>{{(rec.Quantity)}}</td>
        <td>{{rec['Date Formula'] | date:'MM/dd/yyyy'}}</td>
    </tr>
</ng-template>

and this is the error message

ERROR TypeError: value.toDateString is not a function
at dateIs (primeng-api.mjs:248:30)
at Table.executeLocalFilter (primeng-table.mjs:1092:16)
at Table._filter (primeng-table.mjs:1029:55)
at ColumnFilter.applyFilter (primeng-table.mjs:4476:17)
at ColumnFilter_div_4_ng_template_3_button_6_Template_button_click_0_listener (primeng-table.mjs:4607:88)
at executeListenerWithErrorHandling (core.mjs:14090:16)
at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:14123:22)
at HTMLButtonElement.<anonymous> (platform-browser.mjs:402:38)
at _ZoneDelegate.invokeTask (zone.js:409:31)
at core.mjs:23999:55

thanks.