我有一个使用离子React动态构建的表单，是的，用于验证，这是基于来自API的信息完成的，但我有一个问题，如果我没有选择单选按钮，当我按提交单选按钮变得不可点击，这意味着我永远无法摆脱错误。
我在这里创建了一个硬编码表单的示例，而不是动态填充的表单，如果您单击"保存"而不执行任何操作，则无法选择单选按钮，但我无法解决我的问题来自哪里。
Link to example of my issue
编辑：
以下是无法正常工作的主要代码部分：

import React, { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import {
  IonList,
  IonRadioGroup,
  IonItem,
  IonLabel,
  IonRadio,
  IonButton,
  IonContent,
  IonPage,
  setupIonicReact,
  IonInput
} from "@ionic/react";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

/* Theme variables */
import "./theme/variables.css";
setupIonicReact();

const validationSchema = yup.object().shape({
  q7: yup.string().required("selection is required")
});

export default function App() {
  const {
    register,
    reset,
    getValues,
    handleSubmit,
    control,
    formState: { errors }
  } = useForm({
    resolver: yupResolver(validationSchema),
    mode: "all"
  });

  const onSubmit = (data: any) => {
    console.log(data);
  };

  // useEffect(() => {
  //   reset({
  //     // q7: "6"
  //   });
  // }, [reset]);

  return (
    <React.Fragment>
      <IonPage className="xion-page" id="main-cntent">
        <IonContent className="ion-padding">
          <div className="App">
            <form onSubmit={handleSubmit(onSubmit)}>
              <>
                values:{getValues("name")}
                <IonInput {...register("name")}></IonInput>
                error:{errors["q7"]?.message}
                values:{getValues("q7")}
                <Controller
                  control={control}
                  name="q7"
                  render={({ field: { onChange, value, ref } }) => (
                    <>
                      {console.log(value)}
                      <IonList>
                        <IonRadioGroup
                          ref={ref}
                          defaultValue=""
                          // allowEmptySelection={true}
                          value={value ?? ""}
                          onIonChange={({ detail: { value } }) =>
                            onChange(value ?? "")
                          }
                        >
                          <IonItem>
                            <IonLabel>Type 2</IonLabel>
                            <IonRadio value="2" slot="start" />
                          </IonItem>

                          <IonItem>
                            <IonLabel>Type 4</IonLabel>
                            <IonRadio slot="start" value="4" />
                          </IonItem>

                          <IonItem>
                            <IonLabel>Type 6</IonLabel>
                            <IonRadio slot="start" value="6" />
                          </IonItem>
                        </IonRadioGroup>
                      </IonList>
                    </>
                  )}
                />
                <br />
                <IonButton type="submit">Save</IonButton>
              </>
            </form>
          </div>
        </IonContent>
      </IonPage>
    </React.Fragment>
  );
}