i'm trying to refencer a realtime database at my reactjs aplication but it's not working.I created a file for firebase config named firebase.js and i import that one in ./home/index.js Visual Studio code does not report the error, but when i look the DevTool report 3 errors.

1.Uncaught TypeError: firebase__WEBPACK_IMPORTED_MODULE_1_.default.app.ref is not a function

2.The above error occurred in the component

3.Uncaught (in promise) TypeError: firebase__WEBPACK_IMPORTED_MODULE_1_.default.app.ref is not a function

1.firebase.js

import {initializeApp}from  'firebase/app';
import { getAuth} from 'firebase/auth';
import { getDatabase} from 'firebase/database';


const firebaseAPP =initializeApp( {
    apiKey: "AIzaSyCtYdRuFmkC3Mx7dcRLBcY-HYPitRuMD2Y",
    authDomain: "reactproject-2d567.firebaseapp.com",
    databaseURL:"https://reactproject-2d567-default-rtdb.firebaseio.com/",
    projectId: "reactproject-2d567",
    storageBucket: "reactproject-2d567.appspot.com",
    messagingSenderId: "199332161332",
    appId: "1:199332161332:web:828be709a4d0109df62761",
    measurementId: "G-F517JH6WEJ"
  });
  
  const auth = getAuth(firebaseAPP)
  const db = getDatabase(firebaseAPP)



class Firebase{
     constructor(){
        
         this.app = getDatabase(firebaseAPP);
     }
    
    //metodo de login 
    login(email,password){
        return auth.signInWithEmailAndPassword(email,password)
    }

     async register(nome,email,password){
        await auth.createUserWithEmailAndPassword(email,password)

        const uid= auth.currentUser.uid
        return db.ref('usuario').child(uid).set({nome:nome})
    }
    isInitialized(){
        return new Promise(resolve =>{
            auth.onAuthStateChanged(resolve)
        })
    }


} 
export default new Firebase();

2../home/index.js

import React, { Component } from 'react';
import firebase from '../../firebase';
import './home.css'
class Home extends Component {
     state ={
         posts:[]
     }
     componentDidMount(){
         firebase.app.ref('posts').once('value', (snapshot)=>{
             let state = this.state;
             state.posts =[]
             snapshot.forEach((childItem)=>{
                 state.posts.push({
                     key:childItem.key,
                     titulo:childItem.val().titulo,
                     image:childItem.val().image,
                     descricao:childItem.val().descricao,
                     autor:childItem.val().autor,
                 })
             })
             this.setState({state})
         })
     }
    render(){
        return(
            <div> home</div>
        )
    }
}

export default Home