I want to make a "Terms of Use" checkbox, and I'm using FormControlLabel for nesting a Checkbox for it, but I need to make a link that when clicked is opening a Dialog component, that is rendering the terms, but when I click on the link "" it also checks the checkbox, since it's inside the label.

It's pretty hard trying to make a structure to make it look good, so it would be beneficial if it was possible to render the link inside the label as well.

Here is the code:

<FormGroup row className={localClasses.greenCheckbox}>
  <FormControlLabel
    control={
      <Checkbox
        checked={state.lgpd_agreement}
        onChange={lgpdAgreementOnChange}
        name="lgpd_agreement"
      />
    }
    label={
      <p>
        Autorizo a #### coletar e armazenar meus dados com a finalidade
        de fornecer os serviços do programa conforme o respectivo
        Termo&nbsp;
  <span className={localClasses.openDialogButton} onClick={() => handleOpenModal('authTerm')}>Ler</span>
      </p>
    }
  />
</FormGroup>