エラー表示 『Attempted import error: 'auth' is not exported from '../firebase'.』を改善したい

reactで、Firebaseを使い、認証機能を作成しています。

『Attempted import error: 'auth' is not exported from '../firebase'.』 という表示を改善したいです。

試したこと

『attempted import error: 'auth' is not exported from '../firebase'. v9』

上記のエラー文を検索して、表示されたサイトや動画に書いてある改善方法を実行したが、 改善しませんでした。

① エラー文を訳して、『インポート試行エラー: 'auth' は '../firebase' からエクスポートされません。』という事なので、 firebase.jsにて、表示されたサイトや動画に書いてあるソースコードを入力したが、改善しなかった。

② AuthProvider.jsで、上記の表示されたサイトや動画に書いてあるソースコードを入力したが、改善しなかった。

どのように解決したらよくわかりません。何方かアドバイスをお願いします。

//ディレクトリ構成

src
 ├── auth
    ├── AuthProvider.js
    └── Login.js
    └── PrivateRoute.js
    └── SignUp.js
 ├── components
 ├── firebase.js
 ├── App.js

//AuthProvider.js
import React, { useEffect, useState } from "react";
//import React, { useContext, useState, useEffect } from "react";
import { auth } from "../firebase";

// import {
//   createUserWithEmailAndPassword,
//   signInWithEmailAndPassword,
//   onAuthStateChanged,
// } from "firebase/auth";
// import { firebaseAuth } from "../firebase";
// import { db } from "./firebase";
// import firebase from "./firebase";
// import firebase from "../../firebase";

const AuthContext = React.createContext();

const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  //サインアップ後認証情報を更新
  const signup = async (email, password, history) => {
    try {
      await auth.createUserWithEmailAndPassword(email, password);
      auth.onAuthStateChanged((user) => setCurrentUser(user));
      history.push("/");
    } catch (error) {
      alert(error);
    }
  };

  //ログインさせる
  const login = async (email, password, history) => {
    try {
      await auth.signInWithEmailAndPassword(email, password);
      auth.onAuthStateChanged((user) => setCurrentUser(user));
      history.push("/");
    } catch (error) {
      alert(error);
    }
  };

  //初回アクセス時に認証済みかチェック
  useEffect(() => {
    auth.onAuthStateChanged(setCurrentUser);
  }, []);

  return (
    <AuthContext.Provider value={{ signup, login, currentUser }}>
      {children}
    </AuthContext.Provider>
  );
};
export { AuthContext, AuthProvider };

//firebase.js

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
//import { auth } from "firebase/auth";
//import { firestore } from "firebase/firestore";

const firebaseApp = initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
});
const getAuth = getAuth(firebaseApp);
const getFirestore = getFirestore(firebaseApp);
//export const auth = app.auth();
//export default app;
// const auth = auth(firebaseApp);
// const firestore = firestore(firebaseApp);