将类别添加到所选选项

我需要在React-Select中使用选定选项的after来在行中放置一个复选框（并在选中该选项时对其进行检查。

我可以通过SCSS修改元素，但是在类中的选定和未选定选项之间没有区别。（它只是具有随机名称的另一个类。其css-[random]-option）

那么，有没有办法选择了该选项时，加个班？

这是我要做的设计：

我已完成所有工作，但选中了复选框。

如果要查看代码：

const customStyles = {}
return(<div class="SelectContainer">
    <div class="opener" onClick={(e) => {setIsOpen(!isOpen);}}>
        {outputValue ? outputValue : placeholder}
        <Chevron />
    </div>
    {isOpen &&
        <Select 
            onChange={onChangeFunction}
            value={elementValue}
            autoFocus
            backspaceRemovesValue={false}
            controlShouldRenderValue={false}
            hideSelectedOptions={false}
            menuIsOpen
            tabSelectsValue={false}
            noOptionsMessage={()=>{return "Aucun résultat";}}
            placeholder="Rechercher"
            customStyles={customStyles}
            {...rest}
            //style={{width:"100%"}}
        >
            {choices && choices.map((choice) => { 
                return (<option key={choice.val} value={choice.val}>{choice.option}</option>)
            })}
        </Select>
    }
</div>)

.SelectContainer{
    .opener{
      display:flex;
      align-items: center;
      justify-content: space-between;
      padding:0 24px;
      height:72px;
      //border:1px solid #000;
      background:#fff;
    }
    input{
      height:24px;
    }
    [class$="container"]{
      background:#fff;
      //padding:0 24px;
      padding:0;
      [class$="ValueContainer"]{
        
      }
      [class$="control"]{
        border:0;
        position:relative;
        padding-left:30px;
        margin:0 24px;
        &:before{
          content:' ';
          display:block;
          position:absolute;
          top:50%;
          left:0;
          transform:translateX(-0) translateY(-50%);
          width:16px;
          height:16px;
          background:url(../../assets/image/search.svg) center center no-repeat;
          background-size:contain;
        }
        [class$="Input"]{
          width: calc(100% - 50px);
          z-index: 100;
          position: relative;
          
          input{width:100% !important;}
        }
      }
      [class$="IndicatorsContainer"] [class$="indicatorContainer"]:last-child,[class$="IndicatorsContainer"] [class$="indicatorSeparator"]{
        display:none !important;
      }
      [class$="indicatorContainer"]{
        padding:0;
      }
      [class$="menu"]{
        position:relative;
        box-shadow:none;
        [class$="option"]{
          background:none !important;
          color:#000 !important;
          position:relative;
          padding:8px 24px;
          cursor:pointer;
          &:hover{
            background:var(--light) !important;
          }
          &:after{
            width:16px;height:16px;
            display:block;position:absolute;
            content:' ';
            border:2px solid #000;
            position:absolute;
            right:24px;
            top:calc(50% - 8px);
          }
        }
      }
    }
  }