Radio buttons require double click on aura component

Question

I have written a flow in which user data is sent to an external API and receives a multiple choice quiz back. The flow then takes that quiz and passes it to a screen with a custom aura component on it where the quiz is displayed as a series of radio groups.

The issue I am encountering is that when I try to interact with the radio groups, the first click on an option only brings it into focus and a second click is required to mark the option as selected. What needs to be done so that the radio groups will behave properly and indicate a selection after only a single click?

Component

<aura:component implements="lightning:availableForFlowScreens">
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    
    <aura:attribute name="quizQuestions" type="QuizQuestion[]" />
    <aura:attribute name="quizAnswers" type="QuizAnswer[]" />
    
    <aura:iteration items="{!v.quizQuestions}" var="question">
        <lightning:radioGroup 
                              name="{!'Question ' + question.questionNumber}"
                              aura:id="{!'Question ' + question.questionNumber}"
                              label="{!question.questionText}"
                              options="{!question.questionChoices}"
                              value="{!question.selection}"
                              onchange="{!c.onQuizSelection}"
                              type="radio"/>
    </aura:iteration>
</aura:component>

The quizQuestions attribute is an exposed input attribute that is initialized by an apex action just before this screen is displayed in the flow, while quizAnswers is an exposed output attribute for use later in the flow

Controller

({
    init : function(component, event, helper) {
        helper.formatQuizQuestions(component.get("v.quizQuestions"));
        const answers = helper.generateQuizAnswers(component.get("v.quizQuestions"));
        component.set("v.quizAnswers", answers);
    },
    onQuizSelection : function(component, event, helper) {
        const answers = helper.generateQuizAnswers(component.get("v.quizQuestions"));
        component.set("v.quizAnswers", answers);
    }
})

Helper

({
    formatQuizQuestions : function(quizQuestions) {
        quizQuestions.forEach(
            (question) => {
                const { questionChoices } = question;
                const formattedChoices = questionChoices.map(
                    (choice) => ({ label: choice.answerText, value: choice.answerNumber})
                );
                question.questionChoices = formattedChoices;
                question.selection = 0;
            }
        );
    },
    generateQuizAnswers : function(quizQuestions) {
        return quizQuestions.map(
            (question) => ({ questionNumber: question.questionNumber, answerNumber: Number(question.selection) })
        );
    }
})

Answer 1

in lightning:radioGroup, the 'options' attribute works well with string values.
In the formatQuizQuestions, we need to set values as string only

                const formattedChoices = questionChoices.map(
                    (choice) => ({ label: choice.answerText, value: String(choice.answerNumber)})
                );
                question.questionChoices = formattedChoices;
                question.selection = '0';

lightning:radioGroup docs : https://developer.salesforce.com/docs/component-library/bundle/lightning:radioGroup/documentation