Two dialog boxes on one page and enabling checkboxes?

I am creating a form with a checkbox that says "Agree to Code of Conduct and Guidelines", in which 'Code of Conduct' and 'Guidelines' are hyperlinks that open dialog boxes. However, I do not want this checkbox to be enabled (aka, the user cannot click on the checkbox) until they have clicked both hyperlinks.

Code is shown here:

<input className="checkbox" type="checkbox" placeholder="CodeofConduct" name="coc" ref={register({ required: true })} /><span>Agree to <a id="link1" className="coc" onClick={handleClickOpen('paper')}>Code of Conduct</a> and <a id="link2" className="guideline" onClick={handleClickOpen('paper')}>Guidelines</a></span>

{errors.coc && errors.coc.type === "required" && <span className="error">You must agree to the Code of Conduct and Guidelines.</span>}

<Dialog id="link1"
  open={open}
  onClose={handleClose}
  scroll={scroll}>
  <DialogTitle id="scroll-dialog-title">Code of Conduct: Our Values</DialogTitle>
  <DialogContent dividers={scroll === 'paper'}>
    ... //Dialog content
  </DialogContent>
</Dialog>

<Dialog id="link2"
  open={open}
  onClose={handleClose}
  scroll={scroll}>
  <DialogTitle id="scroll-dialog-title">Code of Conduct: Our Values</DialogTitle>
  <DialogContent dividers={scroll === 'paper'}>
    ... //Dialog content
  </DialogContent>
</Dialog>

I need a function to keep track of whether those two hyperlinks have been clicked, and ensure that the appropriate dialog boxes are appearing when each link is clicked on. Right now, only the dialog content labeled as link2 is showing in both of my dialog boxes. Could someone please show me how to show two dialog boxes on the same page, as well as only enable the checkbox alongside them when both of these links are clicked?