Why won't the action value set in the state?

Given the following state

export const initialState: State = {
    filters: {
        typeahead: [],
    },
    cases: [] as CaseData[],
    recordsReview: {} as DCMedicalRecordsReview,
    caseMetrics: {
        filter: {
            payer: '',
            lob: ''
        },
        providers: [],
        patients: []
    }
}

I am trying to pass a single string of data into the reducer and set it in the state

        on(CasesActions.setPayerFilter, (state, action) => ({
            ...state,
            caseMetrics: {
                ...state.caseMetrics,
                filter: {
                    ...state.caseMetrics.filter,
                    payer: action.payer
                }
            }
        })),

This is done using the following action 'Set Payer Filter' : props<{ payer: string}>()

When I attempt to display or log the set state, I receive an undefined. I am attempting to retrieve the information from the following selector:

export const selecselectCaseMetricsFilterPayerCase = createSelector(
    casesFeature.selectCaseMetrics,
    (metrics) => metrics.filter.payer
)

Why is this coming up undefined?

Updates from Comments:

The action is being called from the filter change:

<div class="col">
    <select class="form-control form-control-sm" name="payer_id" ngModel (ngModelChange)="onPayerFilterChange($event)">
        <option value="">--Payer--</option>
        <option *ngFor="let payer of payerFilters$()" [value]="payer">{{payer}}</option>
    </select>
</div>

on update the action is called:

  onPayerFilterChange(payer: any) {
    this.store.dispatch(CasesActions.setPayerFilter(payer))
  }

the payload being sent is a simple string {payer: string}

Since you have mentioned that the type should be {payer: string}, then we can emit an object with the property name as payer, then it should work.

onPayerFilterChange(payer: any) {
  this.store.dispatch(CasesActions.setPayerFilter({ payer }))
}