the sub checkbox is not working or not clickable as long as I add scss

I am making checkbox with sub checkboxes. All the functions works fine without scss. I wonder why as long as I add scss, only the main checkbox is working but not the sub checkboxes. I found out it seems like once the scss is applied, my mouse can only access the main checkbox but when the mouse is trying to indicate the sub options..it only can access the .checkbox area. photo for showing when mouse is trying to hover over the sub options

Could anyone please advise? Thank you very much!

    <div className="checkbox">
        <label htmlFor="option" className="checkbox__label checkbox__label--parent">

            <input
                type="checkbox"
                id="option"
                ref={parentRef}
                onChange={handleAllChecked}
                className="checkbox__input checkbox__input--main"
            />

            <span className="checkbox--fake"/>
            {/* <span>All</span> */}
        </label>

        <ul className="checkbox__list">
            {options.map((opt, i) => {
                return (
                    <li key={opt.id} className="checkbox__list--item">
                        <label htmlFor={opt.country} className="checkbox__label 
                         checkbox__label--subOption">
                            <input
                                type="checkbox"
                                name={opt.country}
                                className="checkbox__input checkbox__input--subOpt"
                                checked={opt.checked}
                                onChange={handleOptions}
                                value={opt.country}
                            />
                            <span className="checkbox--fake"/>
                            {/* <span>{opt.country}</span> */}
                        </label>
                    </li>
                );
            })}
        </ul>
        <label htmlFor="disabled" className="checkbox__label--disabled">
        <input type="checkbox" disabled className=" checkbox__input checkbox__input-- 
             disabled"/>
        Disabled
        </label>
    </div>

Scss part

  .checkbox {
      &__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30px;
    margin: 0 auto;
    border-radius: 5px;
    background: transparent;
}
&__input{
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
    position: absolute;

    &:not(:disabled) {
        &:checked {
            + span {
                background-color: #6200eeff;
                &::after {
                    content: '';
                    opacity: 1;
                    height: 6px;
                    width: 12px;
                    -webkit-transform-origin: left top;
                    transform-origin: left top;
                    border-left: 2px solid #f9f9f9;
                    border-bottom: 2px solid #f9f9f9;
                    left: 50%;
                    top: 50%;
                    border-radius: 0;
                    position: absolute;
                    transition: all .3s ease; /* to define how the effect will be */
                }
            }

            &:hover {
                + span {
                    box-shadow: 0px 0px 0px 12px rgba(72, 35, 219, 0.15);
                }
            }
        }
    }
    &:not(:disabled) {
        &:hover {
            + span {
                box-shadow: 0px 0px 0px 12px rgba(131, 131, 131, 0.15);
            }
        }
        &:focus {
            + span {
                box-shadow: 0px 0px 0px 12px rgba(131, 131, 131, 0.35);
            }
        }
        &:active {
            + span {
                box-shadow: 0px 0px 0px 12px rgba(131, 131, 131, 0.35);
            }
        }
    }
}
&--fake {
    width: 24px;
    height: 24px;
    position: relative; 
    background-color: #6200eeff;
    border-radius: 2px;
    display: block; 
    transition: all .5s ease;

    &::after {
        opacity: 0;
        height: 24px;
        width: 24px;
        border-radius: 50%;
        content: '';
        left: 50%;
        top: 50%;
        transform: translate(-50%) rotate(-45deg);
        position: absolute; 
    }
}
&__list {
    list-style: none;
    pointer-events: none;
    &--item {
        margin: 10px;
    }
}

}