Как сделать обязательным нажатие одной из кнопок-переключателей в форме?

Question

Как сделать обязательным нажатие одной из кнопок переключения в форме реакции? Когда пользователь нажимает кнопку отправки, я хочу показать ошибку, если переключатель не нажал ни на одну из кнопок. Я написал в форме требуемый, но он все еще не работал. Короче говоря, хочу сделать необходимым нажать одну из кнопок переключения. Как я могу это сделать?

я использовал этот компонент

Пример компонента

    const FormButtonGroup = ({
                             question,
                             formKey,
                         }) => {

    const dispatch = useDispatch()
    const reduxValue = useSelector(state => state.app.forms.f3[formKey].value)
    const isSaved = useSelector(state => state.app.forms.f3[formKey].saved)

    const [input, setInput] = useState({
        value: reduxValue,
        valid: true,
    })

    const changeSelected = val => {
        setInput({...input, value: val, valid:val})
        dispatch(saveAnswer('f3', formKey, val))
    }

    useEffect(() => {
        setInput({...input, value: reduxValue})
    }, [reduxValue])

    useEffect(() => {
        if (isSaved) {
            dispatch(resetSavedStatus('f3', formKey))
        }
    }, [isSaved])

    return (
        <>

            <Row>
                <Col className='col-10'>
                    {question}
                </Col>
                <Col className='col-2'>
                 <form>
                    <ToggleButtonGroup name={formKey}
                                       type='radio'
                                       onChange={changeSelected}
                                       value={input.value}
                                       vertical={false} toggle>
                        <ToggleButton
                            className='btn-group'
                            key='1'
                            value={'true'}
                        >
                            Yes
                        </ToggleButton>
                        <p></p>
                        <ToggleButton
                            className='btn-group'
                            key='2'
                            value={'false'}
                        >
                            No
                        </ToggleButton>
                    </ToggleButtonGroup>
                </form>
                </Col>
            </Row>
            <div className='row' style={{marginTop: '-2rem'}}>
                <div className='col-2 ml-auto'>
                    <Button className='next-button' type={"submit"}>
                        Complete
                    </Button>
                </div>
            </div>
        </>
    )
}

Answer 1

Использовать значение по умолчанию для одной из кнопок