I am having a TypeError: Cannot read property ‘GoogleAuthProvider’ of undefined?(React JS) Firebase?

Ok as the Yaakov Ainspan mentioned in the comment above that you must include the import statement firebase/auth.So you have to just import it like this in your component like

import firebaseAuth from 'firebase/auth/dist/index.esm'

and the rest of the code will be the same

import React from 'react';

// Import FirebaseAuth and firebase.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faQuestionCircle, faBook, faCamera, faMapMarkerAlt, faCoffee, faSearch, faSearchPlus, faUserCircle, faComment } from '@fortawesome/free-solid-svg-icons';
import { Link } from "react-router-dom"
import "../App.css";

import firebase from 'firebase/app';

import firebaseAuth from 'firebase/auth/dist/index.esm'

import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

import { Button, Modal } from 'react-bootstrap'


 firebase.initializeApp({
    apiKey: "AIzaSyDAelHByyhxwHlF7JIeCCGwL5HP622k5E8",
    authDomain: "fastsellat.firebaseapp.com",
    databaseURL: "https://fastsellat.firebaseio.com",
    projectId: "fastsellat",
    storageBucket: "fastsellat.appspot.com",
    messagingSenderId: "717565114992",
    appId: "1:717565114992:web:971b1dd5199c57b04812b5",
    measurementId: "G-0NRD11FNQZ"
  })
  

class Login extends React.Component {
    constructor() {
        super()
        this.state = {
            show: false,
         
        }
    }
    handleModal = () => {
        this.setState({
            show: true
        })
    }
    closeModal = () => {
        this.setState({
            show: false
        })
    }
    state = { isSignedIn: false }
    uiConfig = {
        signInFlow: "popup",
        signInOptions: [
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.FacebookAuthProvider.PROVIDER_ID,
          firebase.auth.GithubAuthProvider.PROVIDER_ID,
          firebase.auth.EmailAuthProvider.PROVIDER_ID
        ],
        callbacks: {
          signInSuccess: () => false
        }
      }
    
      componentDidMount = () => {
        firebase.auth().onAuthStateChanged(user => {
          this.setState({ isSignedIn: !!user })
          console.log("user", user)
        })
      }
    render() {
        return (
            <div>
                <Button  variant="outline-primary" onClick={() => { this.handleModal() }}>
                    Login
                    </Button>

                <Modal show={this.state.show}>
                    <Modal.Header>
                      
                            <div style={{width:"100%",border:"1px solid orange"}} id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
                                <ol className="carousel-indicators">
                                    <li data-target="#carouselExampleIndicators" data-slide-to={0} className="active" />
                                    <li data-target="#carouselExampleIndicators" data-slide-to={1} />
                                    <li data-target="#carouselExampleIndicators" data-slide-to={2} />
                                </ol>
                                <div className="carousel-inner">
                                    <div className="carousel-item active">
                                        <img id="img1" src="https://statics.olx.com.pk/external/base/img/loginEntryPointPost.webp" alt="First slide" />
  
    
    <p style={{textAlign:"center"}}>Help make OLX safer place to buy and sell</p>
  
                                    </div>
                                    <div className="carousel-item">
                                        <img id="img2"  src="https://statics.olx.com.pk/external/base/img/loginEntryPointFavorite.webp" alt="Second slide" />
                                        
    
    <p style={{textAlign:"center"}}>Contact and close deals faster</p>
  
                                    </div>
                                    <div className="carousel-item">
                                        <img id="img3"  src="https://statics.olx.com.pk/external/base/img/loginEntryPointChat.webp" alt="Third slide" />
                    
    <p style={{textAlign:"center"}}>Save all your favourite items in one place</p>
  
                                    </div>
                                </div>
                                <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                    <span className="carousel-control-prev-icon" aria-hidden="true" />
                                    <span className="sr-only">Previous</span>
                                </a>
                                <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                    <span className="carousel-control-next-icon" aria-hidden="true" />
                                    <span className="sr-only">Next</span>
                                </a>
                            </div>
                       
                    </Modal.Header>
                    <Modal.Body>
                    {
                        this.state.isSignedIn ? (
                            <span>
                            <div>Signed In!</div>
                            <button onClick={() => firebase.auth().signOut()}>Sign out!</button>
                            <h1>Welcome {firebase.auth().currentUser.displayName}</h1>
                            <img
                              alt="profile picture"
                              src={firebase.auth().currentUser.photoURL}
                            />
                          </span>
                        ):(
                            <StyledFirebaseAuth
                            uiConfig={this.uiConfig}
                            firebaseAuth={firebase.auth()}
                          />
                        )}
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={() => { this.closeModal() }} variant="secondary">
                            Close
                        </Button>
                        <Button variant="primary">
                            Save Changes
                        </Button>
                    </Modal.Footer>
                </Modal>

            </div>
        );
    }
}
export default Login;

Your package.json file is also fine. One more thing I would like to clear that you must use the 7.24.0 or below version of firebase and not to use the latest one.Thanks