CSS checkbox styling trouble, "checked" styling won't appear

Is there anything wrong with my styling or divs? This code is supossed to make a block serve as a checkmark inside this checkbox when you click it, I followed a tutorial and it was going great, it even made the example from it appear, but after I made some little changes to the size and so on, it disappeared and couldn't make it come back

The tutorial I followed: https://www.youtube.com/watch?v=WXfGWidDFzA

CSS

.checkbox{
    display: block;
    width: 16px;
    height: 16px;
    background-color: #FFFF;
    border-radius: 0px; 
    border-style: hidden;  
    position: relative; 
    margin-top: 4px;
}

.checkbox ::after{
    position: absolute;
    width: 9px;
    height: 9px;
    align-content: center;
    background-color: #006972;
    opacity: 0;
    transition: all 0.4s;
}
#check:checked ~ .checkbox {
    opacity: 1;

}

HTML

<div>
     <input htmlFor="check" type="checkbox" id="check" name="check" value={check} onChange={(e) => isChecked(true)} hidden ></input>
              <label for="check" className="checkbox"></label>
                                </div>