Click event handler on a div with label get triggered twice

Question

document.querySelector('div').addEventListener('click', () => {
  console.log('call');
})

<div>
  <label>
    <p>
      Hello
    </p>
    <input type="checkbox" />
    <span class="checkmark"></span>
  </label>
</div>

I have the following markup:

<div>
  <label>
    <p>
      Hello
    </p>
    <input type="checkbox" />
    <span class="checkmark"></span>
  </label>
</div>

Why when I register an event listener on the div element it called it twice?

document.querySelector('div').addEventListener('click', () => {
  console.log('call');
})