React Auth component with Firebase Phone Auth

import React from 'react';
import { Redirect, useHistory } from 'react-router';
import { useDispatch, useSelector } from 'react-redux';

import {
    getAuth,
    RecaptchaVerifier,
    signInWithPhoneNumber
} from "firebase/auth";
import app from '../../../firebaseSetup';
import { API_BASE_URL, ROUTES } from '../../../constants';
import { setAuthenticatedAccountAction } from '../actions';
import { selectCartMerchant } from '../selectors';



const UserAuth = () => {
    const history = useHistory();
    const dispatch = useDispatch();

    const cartMerchant = useSelector(selectCartMerchant);
    const redirectURL = `${ROUTES['merchants']}/${cartMerchant.slug}` || ROUTES['merchants']

    const auth = getAuth(app);

    const authenticate = (token, phoneNumber) => {
        const data = {'fb_token': token, 'phone': phoneNumber};
        const url = `${API_BASE_URL}/accounts/token/`;

        fetch(url, {
            method: "POST",
            body: JSON.stringify(data),
            headers: {'content-type': 'application/json'}
        })
        .then(res => res.json())
        .then(data => {
            dispatch(setAuthenticatedAccountAction(data.user))
            localStorage.setItem('u_t', data.access);
            localStorage.setItem('u_id', JSON.stringify(data.user));
            history.push(redirectURL)
        })
        .catch(err => console.log(err))
    }

    const configureRecaptcha = () => {
        window.recaptchaVerifier = new RecaptchaVerifier(
            'recaptcha-container',
            {
                'size': 'invisible',
                'callback': (response) => {
                    onSignInSubmit();
                }
            },
            auth
        );
    }

    const onSignInSubmit = ( event ) => {
        event.preventDefault();
        configureRecaptcha();

        const phoneNumber = event.target.phone.value;
        const appVerifier = window.recaptchaVerifier;

        signInWithPhoneNumber(auth, phoneNumber, appVerifier)
        .then((confirmationResult) => {
            window.confirmationResult = confirmationResult;

            const code = window.prompt("Enter your OTP");
            confirmationResult.confirm(code).then((result) => {
                const user = result.user;
                // Login to the server with the generated accessToken
                authenticate(user.accessToken, user.phoneNumber)
            }).catch((error) => {
                // window.recaptchaVerifier.render().then(function(widgetId) {
                //     grecaptcha.reset(widgetId);
                // })
            });
        })
        .catch((error) => {
            // window.recaptchaVerifier.render().then(function(widgetId) {
            //     grecaptcha.reset(window.recaptchaWidgetId);
            // })
        });
    }


    return <div className="items-center flex m-2 flex-col mt-20">
        <div className="w-full md:w-5/12 shadow-md p-10 rounded-md">
            <h1 className="font-extrabold">Authenticate</h1>

            <form className="flex mt-8 flex-col gap-2" onSubmit={onSignInSubmit}>
                <div id="recaptcha-container"></div>
                <small>Enter your phone number to authenticate</small>
                <div className="flex flex-col sm:flex-row justify-between gap-2 items-center">
                    <input type="text" placeholder="phone number" className="
                        bg-gray-100 p-2 rounded-sm text-black outline-none
                        focus:bg-gray-200 w-full
                        " name="phone"
                    />
                </div>

                <div className="text-center mt-3">
                    <input type="submit" className="
                        p-2 w-40 cursor-pointer
                        bg-red-500 rounded-md
                        text-white hover:bg-red-600"
                        value="Authenticate"
                    />
                </div>
            </form>
        </div>
    </div>
}

export default UserAuth;