nextJS/Firebase (experiments:enable webframeworks) DB issue

I am having an issue with a nextJS app that I created on Firebase, following this procedure, running the commands below:

 % npx create-next-app@latest
 % cd myapp
 % firebase experiments:enable webframeworks
 % npm install -g firebase-tools
 % firebase init hosting
 % firebase deploy
 % npm i firebase

 % firebase --version
13.4.1

Here is the contents of app/page.tsx:

 % cat app/page.tsx 
import Image from "next/image";
import LoadData from './components/loadData'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      Where shall we go ?
      <LoadData/>
    </main>
  );
}
 % 

Here is the contents of app/components/loadData.tsx:

 % cat app/components/loadData.tsx 
import { useState, useEffect } from 'react';
import firebase from 'firebase/compat/app';

export default function LoadData() {
  // const dbRef = firebase.database (This produces no error)
  const dbRef = firebase.database()
  //const dbRef = firebase.database().ref('Restaurant')//.child('Adventure')
  /*dbRef.push().set({
    name: 'My favorite one',
    phone: '00-6969-1122',
    station: '2nd Street North"'
  })*/

  return (
        <div>
      LoadData
        </div>
  )
} /* End of LoadData */
 % 

And finally I have this file (initFirebase.tsx):

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/database';

// Note about the following. To be able to log in, only the apiKey is necessary.
// The rest of the information is only useful to access the database.
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_WEB_API_KEY,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  databaseURL: process.env.NEXT_PUBLIC_DATABASE_URL
};

firebase.initializeApp(firebaseConfig);

export default firebase;

export {firebaseConfig}

When running this command:

% firebase deploy

I get this type of answer:

.......
TypeError: e$.database is not a function
......
> Export encountered errors on following paths:
    /page: /

Error: An unexpected error has occurred.

By doing some experiments I figured out this line:

const dbRef = firebase.database()

is causing problems. But I do not really know what to do about it.

Any help or relevant hint would be much appreciated.

(Of course, at the end I want to be able to access my (realtime) DB for read/write)

To initialize and use Firebase products, create a directory firebase and a file config.js

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

const firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "..."
  };

const firebaseApp = initializeApp(firebaseConfig);
export const firebaseDatabase = getDatabase(firebaseApp);

In a component, use the instance of Firebase product imported from firebase/config.js and import other methods or modules needed from Firebase SDK

import { firebaseDatabase } from '../firebase/config';
import { push, ref } from "firebase/database";

export default function Home() {

  const writeData = () => {
    push(ref(firebaseDatabase, 'items'), {
      name: "itemName"
    });
  }

  return (
    <button onClick={writeData}>Write Data</button>
  )
}