Firebase Authentication using contextAPI and useReducer hook

Question

I'm creating a shopping cart with both auth and cart functionality using firebase , so on the register functionality it throws no error at the console but its not registering as well

Here is my authReducer content together with the initialState file:

import { REGISTER, LOGIN, LOGOUT } from "../actions/Actions"
export const authReducer = (state, action) => {
    switch (action.type) {
        case REGISTER:
            console.log('REGISTER', state);
            return {
                ...state, user: action.payload.user, loading: false, profile: action.payload.profile
            }
        case LOGIN:
            return {
                ...state, user: action.payload.user, loading: false, profile: action.payload.profile
            }
        case LOGOUT:
            return {
                ...state, user: action.payload.user, loading: false, profile: action.payload.profile
            }
        default:
            return state
    }
}

initial state file:

const authInitialState = {
    user: null,
    loading: false,
    profile: [],
    error: null,

}
export default authInitialState

In this Global state file , i create a global provider along with the functionality:

import { createContext, useReducer } from "react"
import authInitialState from "../initialState/authInitial"
import cartInitialState from "../initialState/cartInitial"
import { authReducer } from "../reducers/authReducer"
import { cartReducer } from "../reducers/cartReducer"

//create context

export const GlobalContext = createContext()

//create a  provider

export const GlobalProvider = ({ children }) => {

    //how state chnages through useReducer hook

    const [authState, authDispatch] = useReducer(authReducer, authInitialState)
    const [cartState, cartDispatch] = useReducer(cartReducer, cartInitialState)

    //fucntions to add the functionality

    const registerUser = (user) => {
        authDispatch({
            type: 'REGISTER',
            payload: user
        })
    }
 const values = {
        authState,
        authDispatch,
        cartState,
        registerUser,
        login,
        logout,
        cartDispatch
    }

    return (
        <GlobalContext.Provider value={values}>
            {children}
        </GlobalContext.Provider>
    )
} 

Register component:

import React, { useContext, useState } from 'react'
import { GlobalContext } from '../../context/providers/store'
import { auth } from "../../firebase/firebase"
import { createUserWithEmailAndPassword } from "firebase/auth"
import { Row, Col, Form, Container } from "react-bootstrap"
import { Link } from 'react-router-dom'
import HeroImg from "../../assets/hero-img.png"
import { FaTwitter, FaFacebookF } from "react-icons/fa"
import './register.css'
export default function SignUp() {
    const [formFields, setFormFields] = useState({
        email: '',
        password: '',
        confirmPassword: '',
        userName: ''
    })

    const { authDispatch } = useContext(GlobalContext)

    //handleChange

    const handleChange = (e) => {
        const { name, value } = e.target
        setFormFields({ ...formFields, [name]: value })
    }

    //form fields
    const { email, password, confirmPassword, userName } = formFields

    //validate that confirmpassword is same as password

    const validatePassword = () => {
        let isValid = true
        if (password !== '' && confirmPassword !== '') {
            if (password !== confirmPassword) {
                isValid = false
            }
        }
        return isValid
    }


    //register user using firebase

    const handleSubmit = async ({ e, email, password, confirmPassword, userName }) => {

        e.preventDefault();

        if (validatePassword) {
            try {
                const res = await createUserWithEmailAndPassword(auth, email, password)
                console.log(res);
                authDispatch({ type: 'REGISTER', payload: res.user })
            } catch (error) {

            }

        }


    }

    //router to login

    return (
        <div className='reg-formP'>
            <Container>
                <Row className='pt-3 pb-3 justify-content-center'>
                    <Col lg={6} sm={12} md={12} xl={6}>
                        <div className="sign-up-left">
                            <img src={HeroImg} width="100%" height="200px" style={{ objectFit: "contain" }} alt="" />
                        </div>
                        <div className="sign-up-right">
                            <div className="signup-intro d-flex flex-column justify-content-center align-items-center">
                                <h4 className='fw-bold mt-3'>Create account with us</h4>
                                <p>Get notified of exclusive discounts ,newsletter ,offers and more</p>
                            </div>
                            <Form onSubmit={handleSubmit}>
                                <Form.Group className='my-3'>
                                    <Form.Control placeholder='username' type='name' name="userName" value={userName} onChange={handleChange} className='py-3' />
                                </Form.Group>
                                <Form.Group className='my-3'>
                                    <Form.Control placeholder='email' type='email' name="email" value={email} onChange={handleChange} className='py-3' />
                                </Form.Group>
                                <Form.Group className='my-3'>
                                    <Form.Control placeholder='password' type='password' name="password" value={password} onChange={handleChange} className='py-3' />
                                </Form.Group>
                                <Form.Group className='my-3'>
                                    <Form.Control placeholder='password' type='password' name="confirmPassword" value={confirmPassword} onChange={handleChange} className='py-3' />
                                </Form.Group>
                                <Form.Group className='my-3 d-flex align-items-center justify-content-between mb-4'>
                                    <span className='fw-bold'>Already have  a account ? <Link to="/login" className='text-decoration-none ps-2'>Sign in</Link></span>
                                    <button className='hero-btn border-0 rounded'>SIGN UP</button>
                                </Form.Group>
                                <span className='d-flex justify-content-center text-center align-items-center fw-bold mt-2'>or Continue with</span>
                                <Form.Group className='d-flex justify-content-center text-center align-items-center mt-2'>
                                    <button className='border-0 me-3' style={{ color: "#f39c12", borderRadius: "50%" }}><FaFacebookF /></button>
                                    <button className='border-0' style={{ color: "#f39c12", borderRadius: "50%" }}><FaTwitter /></button>
                                </Form.Group>
                            </Form>
                        </div>
                    </Col>
                </Row>
            </Container>
        </div>
    )
}