Проблема с кликом по checkbox, находящемся в li

Есть родительский элемент li c checkbox внутри него. Вот код li:

const Position = (props) => {
    const [isClicked, setIsClicked] = useState(false)

    const toggleCheckBox = (e) => {
        setIsClicked(!isClicked)
        e.stopPropagation();
    }

    const handleClickCheck = (e) => {
        console.log('handleClickCheck')
        toggleCheckBox(e)
    }

    const handleClickComponent = (e) => {
        console.log('handleClickComponent')
        toggleCheckBox(e)
    }


    return (
        <li onClick={handleClickComponent} className="position">
            <Checkbox isClicked={isClicked} handleChange={handleClickCheck} label={props.label} />
        </li>
    )
}

Вот код Checkbox:

const Checkbox = (props) => {

    return (
        <div className="check option">
            <label className="check__label-box">
                <input onChange={props.handleChange} className="check__input" type="checkbox" checked={props.isClicked}/>
                <span className="check__box"></span>
            </label>
            <p className="check__text">{props.label}</p>
        </div>
    )
}

Когда кликаю по li, то в консоли появляется один раз handleClickComponent и input корректно отмечается... Но вот если кликаю по самому чекбоксу, то в консоли сначала два раза(!) срабатывает handleClickComponent, затем handleClickCheck:
2 handleClickComponent
handleClickCheck

При этом элемент инпут не выбирается