Material UI Dialog with checkbox acknowledgement before user can press the yes button to delete record

I am trying to implement a mui dialog box that contains a checkbox that the user has to check/acknowledge first before they can select the "Yes" option.

I currently have a working dialog box component that I am calling that doesn't have the checkbox, but I have added the checkbox part as follows:

export default function ConfirmCheckboxDialog(props) {
  const { confirmDialog, setConfirmDialog } = props;
  const classes = useStyles();

  const [checked, setChecked] = React.useState(false);  

  const handleChange = (event) => {
    setChecked(event.target.checked);
  };  

  return (
    <Dialog open={confirmDialog.isOpen} classes=>
      <DialogTitle className={classes.dialogTitle}>
        <IconButton disableRipple className={classes.titleIcon} size="large">
          <NotListedLocationIcon />
        </IconButton>
      </DialogTitle>
      <DialogContent className={classes.dialogContent}>
        <DialogContentText id="alert-dialog-description">
          <Typography variant="h6">{confirmDialog.title}</Typography>
          <FormControlLabel
          control={
            <Checkbox checked={checked} onChange={handleChange} />
          }
          label="Please acknowledge"
        />
        </DialogContentText>
      </DialogContent>
      <DialogActions className={classes.dialogAction}>
        <Controls.Button
          text="No"
          color="primary"
          onClick={() => setConfirmDialog({ ...confirmDialog, isOpen: false })}
        />
        <Controls.Button text="Yes" color="success" onClick={confirmDialog.onConfirm} />
      </DialogActions>
    </Dialog>
  );
}

Now I am calling this ConfirmCheckboxDialog component above from another component where I have set the following details:

const [confirmDialog, setConfirmDialog] = useState({ isOpen: false, title: '' });

I also have the following button:

<Button
  color="secondary"
  onClick={() => {
    setConfirmDialog({
     isOpen: true,
     title: `Delete?`,
     onConfirm: () => {
       console.log("Deleted......";
     }
   });
>
  {<span>Delete</span>}
</Button>

Based on the above ConfirmCheckboxDialog component, I'm not sure how to validate the checkbox against the Yes button as the only means of the onClick={confirmDialog.onConfirm} /> being set is if the checkbox is set/true

Any help would be good.