我创建了一个单选按钮并将其自定义为实际按钮，如何更改单击的单选按钮的background-color？例如，如果我单击第一个选项，它将突出显示
这是我的UI，它显示了这里的选择

<FormControl sx={{width: '100%'}} >
      <RadioGroup
      aria-labelledby="demo-controlled-radio-buttons-group"
      name="controlled-radio-buttons-group"
      value={value}
      onChange={handleChange}
      sx={{width: '100%', display:'flex', gap:1 }}
      >
         <FormControlLabel 
               value="male" 
               control={<Radio sx={{ display: 'none' }} />} 
               label={
                   <Typography sx={{ fontSize: 16, fontWeight: 'bold' }}>
                       Male
                   </Typography>
                     }
               sx={{
               display: 'flex', 
               alignItems: 'center', 
               width: '100%', 
               justifyContent: 'center',
               color: 'blue',
              '&:hover':{
              backgroundColor: '#03a9f4',
              color: 'white'
               },

                 }}/>

              <FormControlLabel 
        value="female" 
        control={<Radio sx={{ display: 'none' }} />} 
            label={
            <Typography sx={{ fontSize: 16, fontWeight: 'bold' }}>
            Female
            </Typography>
           }
            sx={{
            display: 'flex', 
            alignItems: 'center', 
            width: '100%', 
            justifyContent: 'center',
            color: 'blue',
           '&:hover':{
            backgroundColor: '#03a9f4',
            color: 'white'
            },

            }}/>                                
            </RadioGroup>
</FormControl>