How to use the reactfire.useFirebaseApp function in reactfire

function ProjectTile({ name, projectId, showDelete }) {
  const classes = useStyles()
  const history = useHistory()
  const firebase = useFirebaseApp()

  function goToProject() {
    return history.push(`${LIST_PATH}/${projectId}`)
  }

  function deleteProject() {
    return firebase
      .firestore()
      .collection('projects')
      .doc(projectId)
      .delete()
      .catch(err => {
        console.error('Error:', err) // eslint-disable-line no-console
        return Promise.reject(err)
      })
  }

function AccountEditor() {
  const classes = useStyles()
  const firebase = useFirebaseApp()
  const auth = useUser()
  const accountRef = firebase.database().ref(`users/${auth.uid}`)
  const profileSnap = useDatabaseObject(accountRef)
  const profile = profileSnap.snapshot.val()

  function updateAccount(newAccount) {
    return firebase
      .updateProfile(newAccount)
      .then(() => accountRef.update(newAccount))
      .catch(error => {
        console.error('Error updating profile', error.message || error) // eslint-disable-line no-console
        return Promise.reject(error)
      })
  }

  return (

function useProjectsList() {
  // Get current user (loading handled by Suspense in ProjectsList)
  const auth = useUser()
  const firebase = useFirebaseApp()

  // Create a ref for projects owned by the current user
  const projectsRef = firebase
    .database()
    .ref('projects')
    .orderByChild('createdBy')
    .equalTo(auth.uid)

  // Query for projects (loading handled by Suspense in ProjectsList)
  const projects = useDatabaseList(projectsRef)

  // New dialog
  const [newDialogOpen, changeDialogState] = useState(false)
  const toggleDialog = () => changeDialogState(!newDialogOpen)

  function addProject(newInstance) {

const App = () => {
  const firebaseApp = useFirebaseApp();

  // Kick off fetches for SDKs and data that
  // we know our components will eventually need.
  //
  // This is OPTIONAL but encouraged as part of the render-as-you-fetch pattern
  // https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense
  preloadSDKs(firebaseApp).then(preloadData(firebaseApp));

  return (
    <>
      <h1>
         ReactFire Demo 
      </h1>
      <div>
        
          </div>

function AccountMenu() {
  const classes = useStyles()
  const [anchorEl, setMenu] = useState(null)
  const history = useHistory()
  const firebase = useFirebaseApp()

  function closeAccountMenu(e) {
    setMenu(null)
  }
  function handleMenu(e) {
    setMenu(e.target)
  }
  function handleLogout() {
    closeAccountMenu()
    // redirect to '/' handled by UserIsAuthenticated HOC
    return firebase.auth().signOut()
  }
  function goToAccount() {
    closeAccountMenu()
    history.push(ACCOUNT_PATH)
  }

function SignupPage() {
  const classes = useStyles()
  const firebase = useFirebaseApp()

  function googleLogin() {
    const provider = new firebase.auth.GoogleAuthProvider()
    return firebase.auth().signInWithPopup(provider)
  }

  function emailSignup(creds) {
    return firebase
      .auth()
      .createUserWithEmailAndPassword(creds.email, creds.password)
  }

  return (
    <div>
      
        </div>

function LoginPage() {
  const classes = useStyles()
  const firebase = useFirebaseApp()

  function googleLogin() {
    const provider = new firebase.auth.GoogleAuthProvider()
    return firebase.auth().signInWithPopup(provider)
  }

  function emailLogin(creds) {
    return firebase
      .auth()
      .signInWithEmailAndPassword(creds.email, creds.password)
  }

  return (
    <div>
      
        </div>