I am working on a quiz app. I created a radio button and used it in QuestionCard. This radio button display 4 question options. unfortunately, I cannot select the correct option from these options. Currently, it is checking all 4 options one by one but it should toggle from the options. It should also display the NEXT button when clicking on an option but it shows nothing.

RadioList

import React, { useState } from 'react';
import styled from 'styled-components';

interface StyledProps {
    active: boolean
}

interface radioProps {
    onChange: any
    val: any
    children?: any
    tag: any

}

const RadioList = ({ onChange, val, children, tag }: radioProps) => {

    const [select, setSelect] = useState('');
    const handleSelectChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        let val = e.currentTarget.value;
        setSelect(val);
    }
    return (
        <Item active={select === 'optionA'}>
            <RadioButton
                type="radio"
                name="radio"
                value={'optionA'}
                checked={select === 'optionA'}
                onChange={e => handleSelectChange(e)}
            />
            <Container>
                <Tag>{tag}</Tag>
                <Details>
                    {children}
                </Details>
            </Container>
        </Item>
    );
}

export default RadioList

QuestionCard

type Props = {
    question: string;
    qImage?: string;
    answers: string[];
    callback: (e: React.MouseEvent<HTMLButtonElement>) => void;
   userAnswer: AnswerObject | undefined;
    questionNr: number;
    totalQuestions: number;
}

export const QuestionCard: React.FC<Props> = ({
    question,
    qImage,
    answers,
    callback,
    userAnswer,
    questionNr,
    totalQuestions }) => {
    return (
        <div>

            {/*  <ScoreCard >question No{questionNr}</ScoreCard> */}
            <p className='number'>
                Question: {questionNr} / {totalQuestions}
            </p>
            <Zoom>
                {!qImage ? '' : (<img src={qImage} width="400" alt="icons" />)}
            </Zoom>
            <p dangerouslySetInnerHTML={{ __html: question }} />

            <div>

                {answers.map((answer, abc) => (
                    <div key={abc} >
                        <RadioList onChange={callback} val={answer} children={answer} tag={abc + 1} />
                    </div>
                ))}
            </div>
           
        </div>
    )
}