RxJS and AngularFire - two versions of RxJS installed installed

The Problem

I recently upgraded my angular app. I am currently using Angular 12, Firebase 9, and AngularFire 7 per the recommendations from AngualrFire documentation

ng --version

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.13
@angular-devkit/build-angular   12.2.13
@angular-devkit/core            12.2.13
@angular-devkit/schematics      12.2.13
@angular/cdk                    12.2.12
@angular/fire                   7.1.1
@angular/flex-layout            10.0.0-beta.32
@angular/material               12.2.12
@schematics/angular             12.2.13
rxjs                            6.6.7
typescript                      4.3.5

I am having trouble with multiple versions of RxJS in my code. For example when attempting to query Realtime Database with AngularFire:

import { take } from 'rxjs/operators';

...

this.users$ = this.userKey$.pipe(
  switchMap(userKey => 
    db.list('/users', ref =>
      userKey ? ref.orderByChild('key').equalTo(userKey) : ref
    ).snapshotChanges().pipe(take(1))
  )
);

Returns the error:

error TS2345: Argument of type 'MonoTypeOperatorFunction<SnapshotAction<unknown>[]>' is not assignable 
to parameter of type 'OperatorFunction<SnapshotAction<unknown>[], unknown>'.

 ).snapshotChanges().pipe(take(1))
                          ~~~~~~~

Troubleshooting

I can fix this by importing the take operator from node_modules of AngularFire. But this is a problem because I need to use the rxjs install from my root node_modules folder.

import { take } from '@angular/fire/node_modules/rxjs/operators';

I came across two different versions of RxJS installed in my project. Running npm list rxjs gives me this:

vex@11.0.0 /Users/timothydenning/code/lost-creekV2
├─┬ @angular-devkit/architect@0.1202.13
│ └── rxjs@6.6.7 
├─┬ @angular-devkit/build-angular@12.2.13
│ ├─┬ @angular-devkit/build-webpack@0.1202.13
│ │ └── rxjs@6.6.7 
│ ├─┬ inquirer@8.1.2
│ │ └── rxjs@7.4.0 
│ └── rxjs@6.6.7 
├─┬ @angular-devkit/core@12.2.13
│ └── rxjs@6.6.7 
├─┬ @angular/cli@12.2.13
│ ├─┬ @angular-devkit/schematics@12.2.13
│ │ └── rxjs@6.6.7 
│ └─┬ inquirer@8.1.2
│   └── rxjs@7.4.0 
├─┬ @angular/fire@7.1.1
│ └─┬ inquirer@8.2.0
│   └── rxjs@7.4.0 
├─┬ codelyzer@6.0.2
│ └── rxjs@6.6.7 
├─┬ firebase-tools@8.20.0
│ └─┬ inquirer@6.3.1
│   └── rxjs@6.6.7 
├─┬ inquirer@6.5.2
│ └── rxjs@6.6.7 
├─┬ inquirer-autocomplete-prompt@1.4.0
│ └── rxjs@6.6.7 
└── rxjs@6.6.7 

This tells me that imports from 'rxjs/operators' are from RxJS v6.6.7. And imports from '@angular/fire/node_modules/rxjs/operators' are from RxJS v7.4.0.

My Question

How do I remove rxjs@7.4.0 from my project and leave only rxjs@6.6.7?

I have tried various things like:

1. Removing rxjs 7 npm uninstall rxjs@7
2. Clearing node_modules and re-running npm install.
3. Upgrading to rxjs 7 (this breaks angular 12).
4. Re-installing rxjs `npm install rxjs@6

@angular/fire 7 has peer dependencies of both RxJs 6 and 7 - so I should be able to use both of them, right?

@angular/fire/package.json

"peerDependencies": {
  ...
  "rxjs": "~6.6.0 || ^7.0.0",
  ...
},