React recaptcha is displayed - reactjs

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("[phone]", 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.