单选按钮需要单击两次（Material UI和ReactJS）

Question

我有三个具有用户角色的单选按钮。当我单击任何单选按钮时，都不会被选中；单选按钮只有在单击两次后才会被选中。

我在材质UI中使用React。

下面是我的代码，

 handleRoleChange(event) {
   const newRole = event.target.value
   const companiesAccess = isPlatformUserRole(newRole) ? 'ALL' : 'SELECT'
   this.changeFormField('companiesAccess', companiesAccess)
   this.changeFormField('companyTags', []) // clear current selection
 }

 <label className={style.requiredLabel} htmlFor="role">
      <span>ROLE</span>
 </label>

 <Radio
   display="row"
   name="role"
   radioItems={options.roleOptions}
   handleClickOnRadio={this.handleRoleChange}
   readOnly={!isNew}
 />

其中options.roleOptions是角色列表。

自定义单选按钮的代码，

const Radio = (props) => {
  let radioButtonStyle = props.display === 'column' ? radioStyleColumn : radioStyleRow
  radioButtonStyle = { ...radioButtonStyle, ...props.radioButtonStyle }

  const items = props.radioItems.map((item, index) => {
const disabled = _isUndefined(item.disabled) ? props.disabled : item.disabled
/* let checked = false
if (props.currentUser === item.value) {
  checked = true
} else {
  checked = false
}
console.log(props.currentUser+' '+item.value+' '+checked)
debugger;*/
return (<RadioButton
  key={index}
  value={item.value}
  label={item.label}
  disabled={disabled}
  style={radioButtonStyle}
  labelStyle={labelStyle}
  iconStyle={iconStyle}
  inputStyle={inputStyle}
  checkedIcon={activeRadioIcon()}
  uncheckedIcon={normalRadioIcon()}
  onClick={props.handleClickOnRadio}
/>)
})

谢谢。