When running this React app, the 'No' button is already checked. I'm new to React and I couldn't pinpoint the error in this code.
<div id='broker'>
<div className='d-flex justify-content-between mb-3'>
<label>Have you engaged a broker or banker?</label>
<div>
<label className='form-check-label me-2' htmlFor='has_broker'>Yes</label>
<input className='form-check-input me-4' name='has_broker' type='radio' value='Yes' onChange={handleChange} checked={values.has_broker === 'Yes'} />
<label className='form-check-label me-2' htmlFor='has_broker'>No</label>
<input className='form-check-input' label= 'No' name='has_broker' type='radio' value='No' checked={values.has_broker === 'No'}
onChange={(e) => {
handleChange(e)
setFieldValue('broker', '')
}} />
</div>
</div>
{
values.has_broker === 'Yes' && <>
<FormControl type='text' name='broker' title='Broker Name' required={true} placeholder='e.g. Morgan Stanley'
value={values.broker} error={errors.broker}
onChange={handleChange}
/>
</>
}
<hr />
</div>