I am trying to use the modular api of the angular fire library where in we use the provide functions to inject the things we need

Import statements

import { provideFirebaseApp, initializeApp, FirebaseApp, getApp } from '@angular/fire/app';
import { provideFirestore, getFirestore, Firestore } from '@angular/fire/firestore';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideStorage, getStorage } from '@angular/fire/storage';

imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideFirestore(() => getFirestore()),
    provideAuth(() => getAuth()),
    provideStorage(() => getStorage())
  ],

The error I am getting is during compilation which is

Value at position 4 in the NgModule.imports of AppModule is not a reference
Value could not be determined statically.(-991010)
app.module.ts(89, 5): Unable to evaluate this expression statically.
app.module.ts(89, 5): A value for ‘provideFirebaseApp’ cannot be determined statically, as it is an external declaration.
Type ‘EnvironmentProviders’ is not assignable to type ‘any[] | Type | ModuleWithProviders<{}>’

Package.json looks like

 "dependencies": {
    "@angular/animations": "^17.3.11",
    "@angular/common": "^17.3.11",
    "@angular/compiler": "^17.3.11",
    "@angular/core": "^17.3.11",
    "@angular/fire": "^17.1.0",
    "@angular/forms": "^17.3.11",
    "@angular/localize": "^17.3.11",
    "@angular/platform-browser": "^17.3.11",
    "@angular/platform-browser-dynamic": "^17.3.11",
    "@angular/router": "^17.3.11",
    "bootstrap": "^5.3.3",
    "chart.js": "^2.9.3",
    "chartjs-plugin-waterfall": "^1.0.3",
    "firebase": "^10.10.0",
    "notiflix": "^3.2.6",
    "rxjs": "^7.8.1",
    "tslib": "^2.0.0",
    "zone.js": "~0.14.7"
  },

And my tsconfig.json is

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2022",
    "lib": [
      "es2018",
      "dom"
    ],
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}