I'm currently working on a register form with angular fire. I want to create a custom validation that search through users collection and return true if displayName already exist.

My code looks like this

username: new UntypedFormControl('', [
            Validators.required,
            Validators.minLength(6),
            Validators.maxLength(12),
            this.checkUsername(this.firestore),
        ])


checkUsername(firestore: AngularFirestore) {
        return (control: AbstractControl) => {
            const displayName = control.value

            return firestore
                .collection('users', (ref) => ref.where('displayName', '==', displayName))
                .snapshotChanges()
                .subscribe((docs) => {
                    // loop through each item in the array and log value
                    docs.map((doc) => {
                        return doc.payload.doc.exists ? { usernameUnavailable: true } : null
                    })
                })
        }
    }

even if doc.payload.doc.exist returns true, there is no custom error added to the form field. Am i missing something?