Click event works correctly in onclick attribute but not as addeventlistener

I'm having an interesting issue that I feel should be pretty simple but it has me stumped. I'm trying to simply track the checked state of a checkbox (if checked, enable a button, if unchecked, leave button disabled). The issue I've come up against is that I can't seem to properly track the checked state of the checkbox in an event listener, but it works if I add it as an onclick attribute in the html and I have no idea why this is.

Working code with html onclick attribute:

Html:

<input type='checkbox' name='check' id='consent' onclick='checkConsent()'>
<label for='check'>Lorem ipsum</label>
<button id='consentBtn' disabled>Agree</button>

JS:

const dialogConsentBtn = document.getElementById('consentBtn');
const consentCheck = document.getElementById('consent');

const checkConsent = () => {

  if (consentCheck.checked === true) {
    console.log('checked');
    dialogConsentBtn.disabled = false;
  } else {
    console.log('unchecked');
    dialogConsentBtn.disabled = true;
  }
}

Non-working code with event listener:

HTML:

<input type='checkbox' name='check' id='consent'>
<label for='check'>Lorem ipsum</label>
<button id='consentBtn' disabled>Agree</button>

JS:

const dialogConsentBtn = document.getElementById('consentBtn');
const consentCheck = document.getElementById('consent');

consentCheck.addEventListener('click', (event) => {
  event.preventDefault();
  if (consentCheck.checked === true) {
    console.log('unchecked');
    dialogConsentBtn.disabled = true;
    consentCheck.checked = false;
  } else {
    console.log('checked');
    dialogConsentBtn.disabled = false;
    consentCheck.checked = true;
  }
}, false);

In the above (non-working) code, I get the following behavior:

• checkbox does not check or uncheck visually
• console.log is always printing out 'unchecked' so the if condition is always coming back true

I have a feeling there's some sort of fundamental difference between how these two things are handled by the browser that's at the heart of my dilemma, but I just can't seem to figure out what that is. Any help with this would be greatly appreciated.

P.S. I also attempted the above code with a 'change' event in the event listener instead of a click event but I come up on the same issue.