Why the event bubbling concept is not getting applied here?

Question

  function checked(e) {
    e.target.classList.add('checked');
  }

  function close(e) {
    console.log("span licked");
  }

  const list = items.map(item => {
    return <li key={item.id} onClick={checked} aria-hidden="true">{item.text} <span className='closeIcon' onClick={close}>&times;</span></li>
  })

This is the small part of my project, please avoid the functionality of the event handler it is yet to define properly. list(li) is the parent of span element and both are getting handled by onclick event handler. when i am clicking on list element(li) then according to event bubbling concept the event handler of child element(span) should execute first then parent element. But here in my case the child element(span) event handler is not even getting executed, only the list element handler is getting executed why?