I am creating a react eCommerce project everything is done but I’m having troubles in login page I created an account in firebase and configured it to allow user to login via their google account.

For signup I’ve given some social icons below the login form in the test file it was working but in the actual file the onClick method is not being triggered.

Here is the code please check it and provide solution for it.

Code in which I’m having trouble =>

import React, { useContext, useState } from 'react'
import { AuthContext } from '../contexts/AuthProvider';
import { Link, useLocation, useNavigate } from 'react-router-dom';
const title = "Login";
const socialTitle = "Login With Social Media";
const btnText = "Login Now"
const socialList = [ { iconName: 'icofont-facebook', siteLink: '#', className: 'facebook', }, {     
iconName: 'icofont-twitter', siteLink: '#', className: 'twitter', }, { iconName: 'icofont-linkedin', 
siteLink: '#', className: 'linkedin', }, { iconName: 'icofont-instagram', siteLink: '#', className: 
'instagram', }, { iconName: 'icofont-pinterest', siteLink: '#', className: 'pinterest', }, ]
const Login = () => {
const [errorMessage, setErrorMessage] = useState("");
const {signUpWithGmail, login} = useContext(AuthContext);
const location = useLocation();
const navigate = useNavigate();
const from = location.state?.from?.pathname || "/";
const handleLogin = (event) => {
    event.preventDefault();
    const form = event.target;
    // console.log(form)
    const email = form.email.value;
    const password = form.password.value;
    // console.log(email, password)
    login(email, password).then((result) => {
        const user = result.user;
        alert("Login successful!")
        navigate(from, {replace: true})
    }).catch((error) => {
        const errorMsg = error.message;
        setErrorMessage("Please Provide Valid Email Address & Password");
    })
}

const handleRegister = (e) => {
    signUpWithGmail().then((result) => {
        const user = result.user;
        navigate(from, {replace: true})
    }).catch((error) => {
        const errorMsg = error.message;
        setErrorMessage("Please Provide Valid Email Address & Password");
    })
}

return (
<div>
    <div className="login-section padding-tb section-bg">
        <div className="container">
            <div className="account-wrapper">
                <h3 className="title">{title}</h3>
                <form className='account-form' onSubmit={handleLogin}>
                    <div className="form-group">
                        <input type="email" name="email" id="email" placeholder='Email Address *' 
required />
                    </div>
                    <div className="form-group">
                        <input type="password" name="password" id="password" placeholder='Password *' 
required />
                    </div>
                    {/* shopwing message */}
                    <div>
                        {
                            errorMessage && (
                                <div className="error-message text-danger mb-1">
                                    {errorMessage}
                                </div>
                            )
                        }
                    </div>
                    <div className="form-group">
                        <div className='d-flex justify-content-between flex-wrap pt-sm-2'>
                            <div className="checkgroup">
                                <input type="checkbox" name="remember" id="remember" />
                                <label htmlFor="remember">Remember Me</label>
                            </div>
                            <Link to="/forgotpass">Forgot Password?</Link>
                        </div>
                    </div>
                    <div className="form-group">
                        <button type='submit' className='d-block lab-btn'>
                            <span>{btnText}</span>
                        </button>
                    </div>
                </form>

                {/* account bottom */}
                <div className="account-bottom">
                    <span className='d-block cate pt-10'>
                        Don't Have an Account? <Link to="/signup">Sign Up</Link>
                    </span>
                    <span className="or">
                        <span>or</span>
                    </span>

                    {/* social login */}

                    <h5 className='subtitle'>{socialTitle}</h5>
                      <ul className="lab-ul social-icons justify-content-center">
                          <li>
                              <button className='github' onClick={handleRegister}><i 
className="icofont-github"></i></button>
                          </li>
                          <li>
                              <a href='/' className='facebook'><i className="icofont-facebook"></i>    
</a>
                          </li>
                          <li>
                              <a href='/' className='twitter'><i className="icofont-twitter"></i></a>
                          </li>
                          <li>
                              <a href='/' className='linkedin'><i className="icofont-linkedin"></i>
</a>
                          </li>
                          <li>
                              <a href='/' className='instagram'><i className="icofont-instagram"></i>
</a>
                          </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</div>
)}

export default Login

code which is working =>

import React from 'react'
import { GoogleAuthProvider, getAuth, signInWithPopup } from "firebase/auth";
import app from "../firebase/firebase.config"
const provider = new GoogleAuthProvider();
const auth = getAuth();
const LoginDemo = () => {
const handleLogin = () => {
    // console.log("Btn Clicked!")
    signInWithPopup(auth, provider).then((result) => {
        const user = result.user;
        alert("Login Done Successfully!")
      }).catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(errorMessage);
      });
}
return (
<div className='m-5 p-5'>
    <button className='bg-primary px-4 text-white' onClick={handleLogin}>Login</button>
</div>
)}
export default LoginDemo

In the working code it is using signInWithPopup and in the code which is not working I’m trying to use signUpWithGmail but it is not working I Can not fathom why it is not working please help.