Как создать взаимоисключающие флажки да/нет + установить значения флажков по умолчанию

Question

Я пытаюсь создать компонент формы реакции-крюка , который достигает следующего:

• Есть два флажка, которые не могут быть отмечены одновременно : флажком «да» и флажком «нет». Когда пользователь нажимает «да», флажок «нет» не должен быть установлен, а значение, присвоенное ключу по умолчанию, должно быть «да». Когда пользователь нажимает «нет», происходит обратное. Как использовать форму реакции-хука для реализации двух взаимоисключающих флажков?
• Если пользователь установил флажок во время предыдущего сеанса, один из флажков сохранит ранее введенное значение (например, если во время первого сеанса пользователь отметит «нет», пользователь увидит «нет» отмеченным при перезагрузке страницы) . Как убедиться, что правильный флажок установлен, когда пользователь возвращается в форму? Независимо от того, что я пробовал до сих пор, оба флажка проверяются, когда я возвращаюсь к форме, независимо от того, назначено ли значение по умолчанию или нет.
• К назначенному ключу должно быть применено только одно значение , строка (не массив). (например, {...otherKeysValues, key_name: "yes"}). На данный момент значения возвращаются как {...otherKeyValues, key_name: ["yes"]}или же {...otherKeyValues, key_name: ["yes", "no"]}в зависимости от моей установки.

Вот грубый пример кода, с которым я работаю:

      function ComponentName({ fetchedData }) {
  const { register, handleSubmit, reset, control, watch } = useForm({
    mode: 'onChange',
    defaultValues: fetchedData
  })

  const { fields, remove } = useFieldArray({
    control,
    name: "fetchedData"
  })



  useEffect(() => {
...fetch data
    reset(fetchedData)
  }, [reset, fetchedData])


const onSubmit = data => console.log(data)

const watchOption = watch('key_name')

return (
  <Form
    onChange={() => console.log("watch, getValues()", watchOption, getValues())}
    onSubmit={handleSubmit(onSubmit)}
  >
    <Col>
      <Form.Check
        className="checkbox-text pl-3"
        inline
        label="Yes"
        value={'yes'}
        ref={register}
        defaultChecked={'yes'}
        name={'key_name'}
        onClick={() => reset({ 'key_name': 'yes' })}

      />

      <Form.Check
        label="No"
        value={'no'}
        ref={register}
        defaultChecked={'no'}
        name={'key_name'}
        onClick={() => reset({ 'key_name': 'no' })}

      />
              </Form>