title: TypeError: Cannot read properties of undefined (reading 'database')
body: <p>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.</p>
  <pre><code>FirebaseCrud.js--
  
  import { Container, Grid, Segment, Form, Input, Button } from &quot;semantic-ui-react&quot;;
  import { useState } from &quot;react&quot;;
  import firebase from &quot;./firebase&quot;;
  
  const FirebaseCrud = () =&gt; {
  
      const [aFirstName, setAFirstName] = useState(&quot;&quot;);
      const [aLastName, setALastName] = useState(&quot;&quot;);
  
      const handleAddUser = () =&gt; {
          const firestore = firebase.database().ref('/UserInfo');
          let data = {
              FirstName:aFirstName,
              LastName:aLastName
          };
          firestore.push(data);
      };
     
      return ( 
      &lt;div class=&quot;ui hidden divider&quot;&gt;
          &lt;Container&gt;
              &lt;Grid&gt;
                  &lt;Grid.Row columns=&quot;2&quot;&gt;
                      &lt;Grid.Column&gt;
                          &lt;Segment&gt;
                              &lt;Form&gt;
                                  &lt;Form.Field&gt;
                                      &lt;label&gt;FirstName&lt;/label&gt;
                                      &lt;Input placeholder=&quot;FirstName&quot; focus value={aFirstName} onChange={(e)=&gt;{setAFirstName(e.target.value);}}/&gt;
                                  &lt;/Form.Field&gt;
                                  &lt;Form.Field&gt;
                                      &lt;label&gt;LastName&lt;/label&gt;
                                      &lt;Input placeholder=&quot;LastName&quot; focus value={aLastName} onChange={(e)=&gt;{setALastName(e.target.value);}}/&gt;
                                  &lt;/Form.Field&gt;
                                  &lt;Form.Field&gt;
                                      &lt;Button onClick={()=&gt;{handleAddUser()}}&gt;Add User&lt;/Button&gt;
                                  &lt;/Form.Field&gt;
                              &lt;/Form&gt;
                          &lt;/Segment&gt;
                      &lt;/Grid.Column&gt;
                      &lt;Grid.Column&gt;Edit User&lt;/Grid.Column&gt;
                  &lt;/Grid.Row&gt;
              &lt;/Grid&gt;
          &lt;/Container&gt;  
      &lt;/div&gt;
     )
  }
      
  
  
  firebase.js --
  
  import firebase from './firebase'; 
  import { initializeApp } from &quot;firebase/app&quot;;
  
  
  const firebaseConfig = {
    apiKey: &quot;AIzaSyC6..............&quot;,
    authDomain: &quot;...................&quot;,
    databaseURL: &quot;....................&quot;,
    projectId: &quot;...................&quot;,
    storageBucket: &quot;...............&quot;,
    messagingSenderId: &quot;...............&quot;,
    appId: &quot;1:.................&quot;
  };
  
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  
  export default firebase;
  </code></pre>
  <p>Please help me with solving this issue. Thank you in advance.</p>