Как исправить ошибку firebase.auth()

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React from "react";

// Icons
import { AiFillGoogleCircle } from "react-icons/ai";
import { MdEmail, MdMail } from "react-icons/md";

// Logo
import loginLogo from "../images/login_logo.svg";

// Styles
import "./login_app_styles/login.css";

// Firebase

import { Auth } from "firebase/auth";
import { auth } from "../firebase";
import { FirebaseError } from "firebase/app";

const Login = () => {
  return (
    <div id="login-page">
      <div id="login-card-upper">
        <img className="login-logo" src={loginLogo} alt="logo"></img>
      </div>
      <div className="login-card-content">
        <div
          className="login-button-google"
          onClick={() =>
            auth.signInWithRedirect(new FirebaseError.auth.GoogleAuthProvider())
          }
        >
          <AiFillGoogleCircle className="google-icon"></AiFillGoogleCircle>
          <p className="google-text">Sign In With Google</p>
        </div>
        <div className="login-button-facebook">
          <MdMail className="facebook-icon"></MdMail>
          <p className="facebook-text">Sign In With Email</p>
        </div>
        <div className="login-separator"></div>
        <button className="sign-up-button">SIGN UP</button>
        <a className="main-website-link" href="#">
          Main Website
        </a>
      </div>
    </div>
  );
};

export default Login;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import firebase from "firebase/compat/app";
import "firebase/auth";

export const auth = firebase
  .initializeApp({
    apiKey: "AIzaSyDt-PkqGohtbtGq8yy3wvQRiBFPhxoZEyU",
    authDomain: "intelligenceio.firebaseapp.com",
    projectId: "intelligenceio",
    storageBucket: "intelligenceio.appspot.com",
    messagingSenderId: "1011852886724",
    appId: "1:1011852886724:web:2f7ed97085a2295db0bf91",
  })
  .auth();

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
{
  "name": "app-redesigned-3",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "firebase": "^9.9.3",
    "react": "^18.2.0",
    "react-chat-engine": "^1.11.23",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}