TypeError: Cannot read properties of undefined (reading 'database')

I continue to get this Type Error about not being able to read properties . Below is the code I used which worked before and then suddenly didn't work through Firebase anymore. The code works fine until I add the handleAddUser and then the typeerror is raised about the database. In firebase.js, the SDK changed and I made the suggested changes but I cannot get it to work.

FirebaseCrud.js--

import { Container, Grid, Segment, Form, Input, Button } from "semantic-ui-react";
import { useState } from "react";
import firebase from "./firebase";

const FirebaseCrud = () => {

    const [aFirstName, setAFirstName] = useState("");
    const [aLastName, setALastName] = useState("");

    const handleAddUser = () => {
        const firestore = firebase.database().ref('/UserInfo');
        let data = {
            FirstName:aFirstName,
            LastName:aLastName
        };
        firestore.push(data);
    };
   
    return ( 
    <div class="ui hidden divider">
        <Container>
            <Grid>
                <Grid.Row columns="2">
                    <Grid.Column>
                        <Segment>
                            <Form>
                                <Form.Field>
                                    <label>FirstName</label>
                                    <Input placeholder="FirstName" focus value={aFirstName} onChange={(e)=>{setAFirstName(e.target.value);}}/>
                                </Form.Field>
                                <Form.Field>
                                    <label>LastName</label>
                                    <Input placeholder="LastName" focus value={aLastName} onChange={(e)=>{setALastName(e.target.value);}}/>
                                </Form.Field>
                                <Form.Field>
                                    <Button onClick={()=>{handleAddUser()}}>Add User</Button>
                                </Form.Field>
                            </Form>
                        </Segment>
                    </Grid.Column>
                    <Grid.Column>Edit User</Grid.Column>
                </Grid.Row>
            </Grid>
        </Container>  
    </div>
   )
}
    


firebase.js --

import firebase from './firebase'; 
import { initializeApp } from "firebase/app";


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

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export default firebase;

Please help me with solving this issue. Thank you in advance.