checkbox cannot be selected after event redistribution [closed]

I need to adjust the values of certain properties in the event object and bubble up the adjusted event object.

I cloned a new event object based on the original event object, adjusted certain property values on the new object and redistributed the events.

Logically, the checkbox should be selected, but it’s not selected here, can anyone help me find out what’s causing this?

const input = document.querySelector('#checkbox')
input.addEventListener('click', (evt) => {
  if (!evt.__cloned) {

    const init = {}
    for (const evtKey in evt) {
      if (evtKey === 'isTrusted') continue
      init[evtKey] = evt[evtKey]
    }

    init.clientX = init.clientX * 2
    init.clientY = init.clientY * 2

    const cloneEvent = new MouseEvent('click', init)
    cloneEvent.__cloned = true

    evt.preventDefault()
    evt.stopImmediatePropagation()

    evt.target.dispatchEvent(cloneEvent)
  } else {
    console.log('do something...')
  }
})

<input id="checkbox" type="checkbox" />
<label for="checkbox">This is label</label>