How to bold customized checkbox text label scss

I want to make customized checkbox in react with using scss.

My react component is:

<div className="checkbox">
        <ul>
          {data.map((item) => (
            <li key={item.id}>
              <label htmlFor={item.text} >
                <span >
                  <input
                    type="checkbox"
                    id={item.text}
                    name="checkbox-list"
                    value={item.text}
                    checked={isSelected.includes(item.id)}
                    onChange={() => onSelectedFilter(item)} //when onClick, I get the error 
                  />
                    <span class="checkbox-icon-wrapper"><span class="checkbox-icon icon-tick"></span></span>
                </span>
                <span className="labeltext" >{item.text}</span>
              </label>
            </li>
          ))}
        </ul>
    </div>

and my style.scss is :

.checkbox {
  display: inline-block;
  ul {
    li {
      label {
        display: inline-flex;
        align-items: center;
        font-family: Montserrat;
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: 0.3px;
        color: #1b1b1b;
        padding: 5px;
        
        &:hover {
          cursor: pointer;
        }

      .checkbox-icon-wrapper {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        display: grid;
        place-items: center;
        width: 14px;
        height: 14px;
        border: 1px solid gray;
        transform: translateY(-0.5px);
        margin-right: 10px;

        .checkbox-icon {
          position: absolute;
          font-size: 8px;
          line-height: 0;    
          color: rgb(255, 255, 255);
        }
      }

      input[type="checkbox"] {
        display: none;
    
        & + .checkbox-icon-wrapper > .checkbox-icon {
            opacity: 0;
            transform: scale(1);
        }
        &:checked + .checkbox-icon-wrapper > .checkbox-icon {
          transform: scale(1);
          opacity: 1;
          
        }
    
      }

      
    }
}}}

.checkbox label input[type="checkbox"] + .checkbox-icon-wrapper > .checkbox-icon {
    opacity: 0;
    transform: scale(1);
}

.checkbox label input[type="checkbox"]:checked + .checkbox-icon-wrapper > .checkbox-icon {
  transform: scale(1);
  opacity: 1;
}

.checkbox label input[type="checkbox"]:checked + .checkbox-icon-wrapper {
  background-color:#e56d59;
  opacity: 1;
  border: 2px solid #e56d59;
  transition: 140ms transform ease-in-out;
  
}

I want to make last child of .checkbox bold when checked state ( span for className=labeltext).

But I can't do this. I'm just learning css and please help me about this issue , what is + or > between classNames ?