Почему не отображается checkbox при клике на него, React?

Question

[Дмитрий Ярощук]

Если .todo-item__checkbox:checked то должен появляться .todo-item__span::after. При этом если перенести функционал checkbox на обычный html css то все работает, а на React не работает, не могу понять в чем проблема
Css отвечающий за данное действие:

.todo-item__checkbox:checked + .todo-item__span::after {
    transform: scale(1) translate(-50%, -50%);
}

React приложение:

export default function TodoItem(props) {
    const { text, id, handleRemove, handleEditing } = props;
    const [hide, setHide] = useState(false);
    const inputRef = useRef(null);
    const showContent = () => {
        setHide(!hide);
    }
    const saveChanges = () => {
        const currentText = inputRef.current.value;
        console.log('text: ', currentText);
        handleEditing(id, currentText);
        showContent();
    }

    const onClick = () => handleRemove(id);
    return (
        <div className="todo-item">
            {
                hide ? <Input text={text} type='text' name='todo-name-editing' required={true} inputRef={inputRef}/> : <div className="todo-item__description">{text}</div>
            }
            {
                hide ? <ButtonSave saveChanges={saveChanges} customClass='todo-item__button-save'/> :
                    <>
                        <ButtonEdit showContent={showContent}/>
                        <Button onClick={onClick} text="Удалить" customClass="todo-item__delete"/>
                        <CheckBox/>
                    </>
            }
        </div>
    )
}

Компонент отвечающий за checkbox:

export default function CheckBox() {
    return (
        <div className='todo-item__container-field'>
            <Input customClass='todo-item__checkbox' type='checkbox' name='checkbox'/>
            <span className='todo-item__span'></span>
        </div>

    )
}

Компонент Input:

export default function Input(props) {
    const { text, type, name, required, inputRef, customClass } = props;
    const className = cx('form__input', { [customClass]: customClass })
    return (
        <input defaultValue={text} type={type} name={name} required={required} className={className} ref={inputRef}/>
    )
}

Весь css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    line-height: 1.2;
    font-size: 18px;
    background-color: #66deb2;
}

h1, h2 {
    text-align: center;
    margin-bottom: 15px;
}
button {
    cursor: pointer;
}

.wrapper {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
}

.container {
    width: 100%;
    margin: 0 auto;
    max-width: 75%;
}

.form {
    background: #fff;
    padding: 10px;
    margin-top: 25px;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
}

label {
    width: 100%;
}

.form__input {
    min-height: 25px;
    padding: 10px;
    width: 100%;
    border: 1px solid;
}

.form__btn {
    background: #0be69d;
    border: none;
    cursor: pointer;
    width: 100px;
}

.form__btn__delete {
    max-width: 250px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0 ;
    background-color: #ff9800;
    border: 2px solid #e91e63;
    border-radius: 15px;
    color: snow;
}

.todo-item {
    display: flex;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.todo-item--checked {
    text-decoration: line-through;
}
.todo-item__description {
    flex-grow: 1;
    padding-left: 10px;
}
.todo-item__delete {
    background: #03a9f4;
    border: none;
    cursor: pointer;
    width: 95px;
    padding: 10px;
    margin-right: 10px;
}
.todo-item__button-editing {
    padding: 0;
    border: none;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
.todo-item__image-editing {
    width: 28px;
    height: 35px;
}
.todo-item__button-save {
    min-height: 35px;
    background-color: #cddc39;
}
.todo-item__container-field {
    display: flex;
    justify-content: center;
    align-items: center;
}
.todo-item__span {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.todo-item__span::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: #cdd1d1;
    border-radius: 3px;
}
.todo-item__span::after {
    transition: transform 0.3s ease-in-out;
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:  scale(0);
    background-color: deepskyblue;
    border-radius: 3px;
}
.todo-item__checkbox {
    position: absolute;
    left: -100%;
}
.todo-item__checkbox:checked + .todo-item__span::after {
    transform: scale(1) translate(-50%, -50%);
}

Answer 1

[scoffs]

Возможно надо что-то типа этого:

export default function CheckBox() {
    const [isChecked, setIsChecked] = useState(false);

    const handleChange = () => {
        setIsChecked(!isChecked);
    };

    return (
        <div className='todo-item__container-field'>
            <input
                className='todo-item__checkbox'
                type='checkbox'
                name='checkbox'
                checked={isChecked}
                onChange={handleChange}
            />
            <span className='todo-item__span'></span>
        </div>
    );
}

Залил бы в песочницу, чтобы самому можно было потыкать и подебажить