React-Material-UI 라디오 버튼 그룹이 클릭시 버튼을 채우지 않습니다.

Material-UI 구성 요소를 사용하여 React 에서 앱을 만들고 있습니다. 하나의 창에는 라디오 버튼으로 표시되는 네 가지 참 / 거짓 선택 사항이 있습니다. 렌더링시 창은 예상대로 렌더링되지만 기본값이 아닌 값을 클릭하면 기본 라디오 버튼이 채우기를 잃고 클릭 한 선택 항목을 채우지 않습니다.

예 : User can mint 기본값이 false이면 false렌더링시 채워지지만 true해당 옵션을 클릭하면 채워지지 않습니다 true( false'채워지지 않음 '이됩니다).

그러나 실제 상태는 변경됩니다. 따라서 이것은 상태의 근본적인 문제가 아니라 렌더링 문제인 것 같습니다.

코드는 다음과 같습니다 (불필요한 부분은 제거하겠습니다).

const UpdateDefaultRole = props => {
  const [open, setOpen] = React.useState(false);
  const [canMint, setCanMint] = React.useState(false);
  const [canBurn, setCanBurn] = React.useState(false);
  const [payFee, setPayFee] = React.useState(true);
  const [paySplit, setPaySplit] = React.useState(true);

  const handleMintChange = e => setCanMint(e.target.value);
  const handleBurnChange = e => setCanBurn(e.target.value)
  const handleFeeChange = e => setPayFee(e.target.value)
  const handleSplitChange = e => setPaySplit(e.target.value)

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Update Default Role
      </Button>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Update Default Role</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Please enter the new permissions for the default role.<br/> WARNING: Be careful! 
            Improper use of this function is dangerous!
          </DialogContentText>
          <FormControl component="fieldset" style={{padding: "20px", margin: "10px"}}>
            <FormLabel component="legend">User Can Mint Tokens:</FormLabel>
            <RadioGroup aria-label="mint" name="can-mint" value={canMint} onChange={handleMintChange}>
              <FormControlLabel value={true} control={<Radio />} label="True" />
              <FormControlLabel value={false} control={<Radio />} label="False" />
            </RadioGroup>
          </FormControl>
          <FormControl component="fieldset" style={{padding: "20px", margin: "10px"}}>
            <FormLabel component="legend">User Can Burn Tokens:</FormLabel>
            <RadioGroup aria-label="burn" name="can-burn" value={canBurn} onChange={handleBurnChange}>
              <FormControlLabel value={true} control={<Radio />} label="True" />
              <FormControlLabel value={false} control={<Radio />} label="False" />
            </RadioGroup>
          </FormControl>
          <FormControl component="fieldset" style={{padding: "20px", margin: "10px"}}>
            <FormLabel component="legend">User Must Pay Fee:</FormLabel>
            <RadioGroup aria-label="fee" name="pay-fee" value={payFee} onChange={handleFeeChange}>
              <FormControlLabel value={true} control={<Radio />} label="True" />
              <FormControlLabel value={false} control={<Radio />} label="False" />
            </RadioGroup>
          </FormControl>
          <FormControl component="fieldset" style={{padding: "20px", margin: "10px"}}>
            <FormLabel component="legend">User Must Pay Split:</FormLabel>
            <RadioGroup aria-label="split" name="pay-split" value={paySplit} onChange={handleSplitChange}>
              <FormControlLabel value={true} control={<Radio />} label="True" />
              <FormControlLabel value={false} control={<Radio />} label="False" />
            </RadioGroup>
          </FormControl>
          
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={submitUpdateDefaultRole} color="primary">
            Submit
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

가능한 한 충실하게 Material-UI 사이트 의 코드를 따르려고 노력했지만 분명히 어딘가에서 엉망입니다.

제 질문을 읽어 주셔서 감사합니다!