React recaptcha is displayed

Question

I have this code, I would like to make recaptcha hidden, how to do it, my recaptcha show general conditions with icon in the right lower corner. Do I need to clean recaptcha? window['recaptchaVerifier'].clear()

I won't to show this icon, recaptcha logo. I need it to make 2FA authentication sms + email. It should work without showing some elements, or is problem that I have this div?

     <div ref={recaptchaWrapperRef}>
                <div id="recaptcha-container"></div>
            </div>

import { Button } from '@material-ui/core'
import React, { useEffect, useRef } from 'react'
import { auth, provider } from '../firebase/firebase'
import useDeviceDetect from '../utils/useDeviceDetect'
import './Login.scss'

declare global {
    interface Window { recaptchaVerifier: any; }
}

function Login(props: any) {
    const val = useRef()
    const recaptchaWrapperRef = useRef(null);

    useEffect(() => {
        initialiseRecaptcha()
    }, [])
    const { isMobile } = useDeviceDetect();

    const initialiseRecaptcha = () => {
        setTimeout(() => {
            if (!window['recaptchaVerifier']) {
                window['recaptchaVerifier'] = new auth.RecaptchaVerifier(
                    "recaptcha-container",
                    {
                        'size': "invisible"
                    }
                );
            }
        }, 2000)
    }

    const TwoFactorAuthentication = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        smsVerification()
        signIn(e)
    }

    const signIn = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        e.preventDefault()
        auth().signInWithPopup(provider)
            .then(result => {
                localStorage.setItem('user', JSON.stringify(result.user));
                window.location.href = '/'
            }).catch(error => {

                alert(error.message)
            })
    }

    const smsVerification = () => {
        if (window['recaptchaVerifier'] != null) {
            new auth.PhoneAuthProvider().verifyPhoneNumber("+421944777170", window['recaptchaVerifier'])
                .then(function (verificationId) {
                    var verificationCode = window.prompt('Please enter the verification code' +
                        ', that was sent on mobile device')
                    if (verificationCode != null) {
                        return auth.PhoneAuthProvider.credential(verificationId, verificationCode)
                    }

                })
                .then(function (phoneCredential) {
                    if (phoneCredential != null) {
                        console.log(phoneCredential)
                        return auth().signInWithCredential(phoneCredential)
                    }

                })
                .catch(function (error) {
                })
        }
    }

    return (<>
        <div className="login">
            <div className="login__logo">
                <img
                    src="https://i.pinimg.com/originals/c6/f2/cd/c6f2cd5e0ebf33ff1ae0b01d0407224c.png"
                    alt="" />

                <img
                    src="https://svgshare.com/i/PTv.svg"
                    alt="" />
            </div>

            <Button id="sign-in-button" type="submit" onClick={TwoFactorAuthentication}>
                Signin
            </Button>
            <div ref={recaptchaWrapperRef}>
                <div id="recaptcha-container"></div>
            </div>
        </div>
    </>
    )
}

export default Login

EDIT: I have found that I need set visibility:hidden on css of grecaptcha div, but it always rerender and disable my setting.

    const hiddenGRecaptcha = () => {
        var head = document.getElementsByClassName('grecaptcha-badge')[0] as HTMLElement
        if (head !== undefined) {
            head.style.visibility = "hidden"
            console.log(head)
        }
    }

this is my new function in typescript to hide recaptcha badge but css are always overwritten don't know where to put it or how to make it persistent.