typeError: Cannot read property 'PROVIDER_ID' of undefined I am using the Latest SDK

I am using this version of firabaseSDK "firebase": "^8.2.9", "firebaseui": "^4.8.0"

typeError: Cannot read property 'PROVIDER_ID' of undefined happens

I refer to this official tutorial. https://firebase.google.com/docs/auth/web/google-signin

I tried several ways...but I couldn't do it with one way or another.

How should I fix it...

Config.js

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
import "firebase/storage";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional

var firebaseConfig = {
  apiKey: "....",
  authDomain: "...",
  databaseURL: "https://...-rtdb.firebaseio.com",
  projected: "...."
};

firebase.initializeApp(firebaseConfig);
firebase.firestore();

export default firebase;

import { Component } from 'react'
import { connect } from 'react-redux'
import { signIn } from '../../store/actions/authActions'
import { Redirect } from 'react-router-dom'
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';



class SignIn extends Component {
    state = {
        email: '',
        password: ''
    }


    uiConfig = {
        signInOptions: [this.props.auth.GoogleAuthProvider.PROVIDER_ID],
    };

    render() {
        const { authError ,auth} = this.props;
        if (auth.uid) return <Redirect to='/' />
        return (
            <div className="container">
                <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={this.props.auth} />
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        authError: state.auth.authError,
        auth: state.firebase.auth
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        signIn: (creds) => dispatch(signIn(creds))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(SignIn)