lightning-input firing two onclick events in Lightning Web Component

From the specification of lightning-input, it looks like there is no native onclick event.

Its recommended that you should be using onchange instead.

HTML:

<template>
    <lightning-input type="checkbox" label="Lightning Checkbox"  onchange={handleBulletPointsInput2}>
        </lightning-input>

        <input type="checkbox" onclick={handleBulletPointsInput2}>HTML Checkbox</input>
</template>

Js:

import { LightningElement } from 'lwc';

export default class InputCheckboxBasic extends LightningElement {
    handleBulletPointsInput2(){
        console.log('--handleBulletPointsInput21--');
    }
}

Playground Link : https://developer.salesforce.com/docs/component-library/tools/playground/lsOssohh3/5/edit

Reason why its firing two events onclick:

In normal html-checkbox, the check uncheck only work when you click on the checkbox.

In lightning-input the check-uncheck work even on click of Label. Both checkbox and label react to click as they both are children of div/span that handles the onclick event and propagates it down to all reactive children