I have updated my Angular 11 project using primeng controls to Angular 12. Once done, the primeng pKeyFilter throws an error everywhere it is used. Creating a new Angular 12 project from scratch does not have this problem. Everything else appears to work fine after the upgrade. Any thoughts?

Here is the component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-key',
  templateUrl: './key.component.html',
  styleUrls: ['./key.component.scss']
})
export class KeyComponent implements OnInit {
  public myvalue: string = '';

  constructor() { }

  ngOnInit(): void {
  }

}

Here is the HTML

<input type="text" pInputText [(ngModel)]="myvalue" pKeyFilter="int"/>

<p>
  <span>{{myvalue}}</span>
</p>

Here is the full error

Error: src/app/modules/nourishment/pages/test/key/key.component.html:1:23 - error NG8007: The property and event halves of the two-way binding 'ngModel' are not bound to the same target. Find more at https://angular.io/guide/two-way-binding#how-two-way-binding-works

1 <input type="text" [(ngModel)]="myvalue" pKeyFilter="int"/> ~~~~~~~

node_modules/@angular/forms/forms.d.ts:3297:22 3297 export declare class NgModel extends NgControl implements OnChanges, OnDestroy { ~~~~~~~ The property half of the binding is to the 'NgModel' component.

node_modules/primeng/keyfilter/keyfilter.d.ts:6:22 6 export declare class KeyFilter implements Validator { ~~~~~~~~~ The event half of the binding is to the 'KeyFilter' component.

src/app/modules/nourishment/pages/test/key/key.component.ts:5:16 5 templateUrl: './key.component.html', ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component KeyComponent.

I understand the basics behind the error but I can't figure out what is triggering it. I have primes InputModule and KeyFilterModule imported as well as FormsModule in the parent module. Again, this was all working prior to the upgrade. https://www.primefaces.org/primeng/showcase/#/keyfilter