firebase.database() is not a function error in react

To give some context i am trying to setup my react app with redux-toolkit and react-redux-firebase (need firebase realtime db).

i followed the react-redux-firebase readme to create this file

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { store } from "./app/store";
import { Provider } from "react-redux";
import * as serviceWorker from "./serviceWorker";
import { initializeApp } from "firebase/app";  
import "firebase/database"; // to enable using firebase RTD
import { ReactReduxFirebaseProvider } from "react-redux-firebase";

const fbConfig = {
    apiKey: "**",
    authDomain: "**",
    projectId: "**",
    storageBucket: "**",
    messagingSenderId: "**",
    appId: "**",
    measurementId: "**",
    databaseURL: "firebase-rtdb-url**",
};

let firebase = initializeApp(fbConfig);

const rrfConfig = {
    userProfile: "users",
};

const rrfProps = {
    firebase,
    config: rrfConfig,
    dispatch: store.dispatch,
};

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <ReactReduxFirebaseProvider {...rrfProps}>
                <App />
            </ReactReduxFirebaseProvider>
        </Provider>
    </React.StrictMode>,
    document.getElementById("root")
);

store.js is just using redux toolkit to create and export a store.

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterSlice";
import { firebaseReducer } from "react-redux-firebase";

export const store = configureStore({
    reducer: {
        counter: counterReducer,
        firebase: firebaseReducer,
    },
});

and also using the demo code given on react-redux-firebase website

import React from "react";
import { useFirebase } from "react-redux-firebase";

export default function Todos() {
    const firebase = useFirebase();

    function addSampleTodo() {
        const sampleTodo = { text: "Sample", done: false };
        return firebase.push("todos", sampleTodo);
    }

    return (
        <div>
            <h1>New Sample Todo</h1>
            <button onClick={addSampleTodo}>Add</button>
        </div>
    );
}

when i click on "add" button this is the exception i get

please let me know if anything else is needed to improve the question. will appreciate any help with this ?

thanks in advance

Since you are using the new Modular SDK, make sure you use it for all the Firebase services:

import "firebase/database"; // Older name-spaced version

The new Modular syntax for realtime database looks like:

import { getDatabase } from "firebase/database" 

let firebase = initializeApp(fbConfig);

const db = getDatabase(firebase)

function addSampleTodo () {
   // Get a key for a new ToDo.
  const newTodoKey = push(child(ref(db), 'posts')).key;

  return update(ref(db), { updates['/todos/' + newTodoKey]: todoData });
}

You can find more details about it in the documentation. This is valid if you use the Firebase JS SDK v9+.

Alternatively, you can change the imports to compat version to keep using existing syntax.

import firebase from "firebase/compat/app"
import "firebase/compat/database"
// import "firebase/compat/[SERVICE_NAME]"

// Also use the name-spaced syntax everywhere else then
firebase.initializeApp(fbConfig);