fromEvent giving "ERROR TypeError: Invalid event target" in Angular

I need to have a fromEvent to have a debounce time for a keyup event (keyup event calls an API each time). Below is my relevant code part.

@ViewChild('emailInput', { static: true }) emailInput: ElementRef;
@ViewChild('usernameInput', { static: true }) usernameInput: ElementRef;

ngOnInit(): void {
       
        this.initializeUserForm();
        
        this.loadDependentData();

        fromEvent(this.emailInput.nativeElement, 'keyup').pipe(
                filter(Boolean),
                debounceTime(1000),
                distinctUntilChanged(),
            ).subscribe(data => {
                this.validateEmail(this.emailInput.nativeElement.value);
        });

}

public validateEmail(userEmail: string) {
   //method body
}

But the above implementation gives the below error.

ERROR TypeError: Invalid event target
    setupSubscription http://localhost:4200/vendor.js:23483
    fromEvent http://localhost:4200/vendor.js:23457
    _trySubscribe http://localhost:4200/vendor.js:22048
    subscribe http://localhost:4200/vendor.js:22034 ........

I have implemented the fromEvent inside ngAfterViewInit() lifecycle hook also. But none of them work for me. Please suggest a solution for this.