How to uncheck radio-buttons in React?

Question

I am new to React, so I am sorry if this is too basic. I intend to build a quiz, and users will answer Yes or No to different questions.

Problem is: the answer from the previous question shows in the following question. I would like each question to start fresh, with unchecked Yes/No answers. How can I do this? Maybe I misunderstood the way React handles radio-buttons. Any help will be appreciated.

Below a piece of my code:

const QUESTION_ANSWER_OPTIONS = [ 'Yes', 'No' ]

<IonRadioGroup> 
    <IonList>
      <div>
      <IonListHeader>
        <IonToolbar>
        <IonTitle size="large"><b> {question} </b></IonTitle> 
        </IonToolbar>
      </IonListHeader>
      </div>
      <div>

      {(types ?? QUESTION_ANSWER_OPTIONS.map(type => {
        color = QUESTION_TYPE_COLOR[type] 

        return (
              <IonItem key={type}>

                <IonText color={color} style={{marginLeft: '15'}}><b>{type}</b></IonText>                   
                <IonRadio 
                  slot = "end" 
                  color = {color} 
                  value = {type} 
                  name = "yes-no options"
                  // checked = {false} //Says attribute does not exist
                  // defaultChecked = {false} //Does not work
                  onClick={onChange ? () => onChange(type) : undefined}>
                  </IonRadio>
              </IonItem>
              )
        }))}
      </div>
    </IonList>
    </IonRadioGroup>`

Answer 1

I solved this issue by replacing IonRadio with input. Not sure if this is the best solution, but it works.

            <input  
              type="radio" 
              slot="end" 
              color={color}
              value = {type} 
              name="yes-no options" 
              checked = {myChecked}
              onClick={onChange ? () => onChange(type) : undefined}>
              </input>