MUI Radio button will not show checked? React

Question

I'm using MUI Radio buttons for my component. Radio buttons are generated through a map function. when the radio is checked I call a function to get the checked radio button. The function works but it won't show whether the checkbox is checked or not.

Code

checkCard(e){
    console.log('checkid',e.target.value)
    var checked = e.target.checked
    if(checked){
        this.setState({
            cardNo: e.target.value
        })
    }

}
               <FormControl>
                    <DialogContentText>
                        Please select the Card for the payment
                    </DialogContentText>
                {
                this.state.cardDetails.cardDetails.map((cards) => (
                    <Card sx={{minWidth: 300}}>
                    <Typography variant="h6" component="div">
                        {cards.maskCardNo}
                    </Typography>
                    <Typography>
                    </Typography>
                    <Box sx={{display: 'row'}}>
                    <Typography>
                        {cards.cardType === 'MASTERCARD' ?
                        <img src={master} className='card-logo-select' alt='card Type' /> :
                        <img src={visa} className='card-logo-select' alt='card Type' />
                    }
                        <RadioGroup name='cardsList'  sx={{display: 'row',float:'right'}}
                        value={this.state.cardNo} onChange={(e)=>this.checkCard(e)} id={cards.cardId}>
                            <FormControlLabel value={cards.cardId} control={<Radio />}/>
                        </RadioGroup>
                    </Typography>
                    </Box>
                </Card>
                )) 
            }
            </FormControl>