In this code, the output has two check boxes, yes & no. Both of them should be unchecked initially. But on default no is checked. on inspecting elements it is shown as checked. Now normally we can delete 'checked ={values.has_broker === 'No'}' & since checked is a boolean and to represent a false value, the attribute has to be omitted altogether. It will work perfectly in that way, but we need that value further, ie, after checking these boxes and moving on to next page, and if the user click back to this page, those values which user checked has to be preserved.so if we delete 'checked ={values.has_broker === 'No'}' altogether, that value will not be preserved. and that particular checkbox 'no' will be blank if user came back to this page.
here setFieldValue is used since formik is imported for form. I cannot pointout why on default no is checked.
<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>