<form className='confession-form' onSubmit={this.handleSubmit}>
<div className="form-group">
<div className="select-box">
<div className={this.state.selectOptionActive ? 'options-container active' : 'options-container'}>
<div className="option" onClick={this.selectOption}>
<input type="radio" name="category" id="dream" className="cat-radio" />
<label htmlFor="dream">Dream</label>
</div>
<div className='option' onClick={this.selectOption}>
<input type="radio" name="category" id="guilt" className="cat-radio" />
<label htmlFor="guilt">Guilt</label>
</div>
<div className='option' onClick={this.selectOption}>
<input type="radio" name="category" id="pain" className="cat-radio" />
<label htmlFor="pain">Pain</label>
</div>
<div className="option" onClick={this.selectOption}>
<input type="radio" name="category" id="wild" className="cat-radio" />
<label htmlFor="wild">Wild</label>
</div>
<div className="option" onClick={this.selectOption}>
<input type="radio" name="category" id="regret" className="cat-radio" />
<label htmlFor="regret">Regret</label>
</div>
<div className="option" onClick={this.selectOption}>
<input type="radio" name="category" id="fantasy" className="cat-radio" />
<label htmlFor="fantasy">Fantasy</label>
</div>
<div className="option" onClick={this.selectOption}>
<input type="radio" name="category" id="other" className="cat-radio" />
<label htmlFor="other">Other</label>
</div>
</div>
<div className="selected" onClick={() => this.setState({selectOptionActive: !this.state.selectOptionActive})}>
{
this.state.optionSelected ? (
this.state.optionSelected
) : (
'Select Category'
)
}
<span className={this.state.selectOptionActive ? 'mdi mdi-chevron-up' : 'mdi mdi-chevron-down'}></span>
</div>
</div>
</div>
<textarea name="confession" id="confession" className='confession-body' placeholder='What is your confession?'></textarea>
<ReCAPTCHA className="recaptcha" sitekey={process.env.REACT_APP_SITE_KEY} size="normal" />
<button className='btn-confess'>Confess</button>
i have this react class compenet with a react-google-recaptcha if i keep refreshing it sometimes the recaptcha doesn't show up. and also if a navigate to my form page from home page then back to home then back to form page again it recaptcha doesnt show up and also i check the inspect element the component recaptcha is only (empty div with a class recaptcha)
