如何在react中将Firebase对象设置为状态？

import React, { useState, useEffect } from 'react';
import firebase from 'firebase/app';
import 'firebase/database';

// 初始化Firebase应用
const firebaseConfig = {
  // Firebase配置信息
};

firebase.initializeApp(firebaseConfig);

const App = () => {
  // 创建状态变量来存储Firebase对象
  const [firebaseApp, setFirebaseApp] = useState(null);

  useEffect(() => {
    // 在组件挂载时，将Firebase对象设置为状态
    setFirebaseApp(firebase);
  }, []);

  // 在组件的其他部分使用firebaseApp来访问Firebase的功能
  // 例如：读取数据库数据
  const fetchData = () => {
    if (firebaseApp) {
      const database = firebaseApp.database();
      // 进一步操作数据库...
    }
  };

  return (
    <div>
      {/* 组件的其他内容 */}
    </div>
  );
};

export default App;