Event propagation is not stopping

Question

I have following code.

<div onClick={handleDescrition} className="tasks-main">
                <div className="task-container">
                  <div className="title_actions">
                    <div className="title">
                      <label className="radio-container">
                        <span onClick={ event => { handleTempHide(elem._id); event.stopPropagation();
                          }} onMouseOver={() => handleCheckMark(elem._id)} onMouseOut={() => removeCheckMark(elem._id)} className="checkmark"
                        >
                          {isChecked[elem._id] && (
                            <i className="fa-thin fa-check"></i>
                          )}
                        </span>
                        <p>{elem.name}</p>
                        <input type="radio" checked={isChecked[elem._id]} />
                      </label>
                    </div>

When I click on span element having class 'checkmark', its event handler is called along with the event handler of the div having class name 'tasks-main' despite of the fact that I have used stop propagation method. In summary, When I click on span element, tasks-main element is also clicked and its event handler is called. I'm unable to figure out why the event handler of tasks-main is being called. Please help.