Module '"@firebase/firestore"' has no exported member 'type' ERROR in Angular 12

I am working on a project on Angular 12 and I use Firestore to store my datas.

In my app module, I imported the needed Modules as follows (it was automatically added when I added firebase to my project) :

import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';

...
imports: [
    ...
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
  ],
...

When I followed the tutorial and try to add a document into a collection, I need to import "AngularFirestore", I do this as follows in my component ts :

import { AngularFirestore } from '@angular/fire/compat/firestore';

constructor(private firebase: AngularFirestore) {}

const ref = this.firebase.collection('collection-name');
ref.add(my-data);

I was expecting the app to work but it crashes once I import "AngularFirestore" and I get the following error :
The error

The versions I am working with are :

the versions