При анимации label сдвигается дальше, чем нужно

Делаю анимированный лейбл для инпутов, работает как задумано: смещается вверх при появлении текста в поле и не ползет вниз, когда убираю фокус с инпута, но почему-то смещается дальше вверх, когда убираю фокус с поля ввода. Нужно, чтобы он оставался на прежней позиции, когда в поле есть цифры и не уходил еще дальше наверх. Пока не хватает опыта, прошу помощи)

вот код разметки:

    <div className='cBlock__wrapper'>
            {location.pathname === '/semantics' &&
              ['C1', 'C2', 'C3'].map((t, index) => (
                <label className='cBlock__inner-wrapper' key={index}>
                  <input
                    id={`nameLabel${t}`}
                    name={t}
                    minLength={1}
                    maxLength={t === 'C2' ? 1 : 2}
                    value={values[t] ? values[t] : ''}
                    type={'text'}
                    onChange={handleChange}
                    key={index}
                    // label={t}
                    className='cBlock__input'
                    placeholder=' '
                    autoComplete={'off'}
                  />
                  <div
                    htmlFor={`nameLabel${t}`}
                    key={index}
                    className='cBlock__inner-label'
                  >
                    {t}
                  </div>
                </label>
              ))}
    </div>

вот код стилей:

.cBlock__inner-wrapper {
    display: block;
    /*padding-top: 20px;*/
    text-align: center;
    /*outline: 1px solid blue;*/
    width: 40px;
    height: 40px;
}

.cBlock__input {
    border: none;
    outline: none;
    width: 40px;
    height: 40px;
    padding: 9px 0 0 0;
    text-align: center;
    background-color: transparent;
    position: relative;
    z-index: 50;
}


/* анимация смещения и изменения цвета текста label */
.cBlock__inner-wrapper input:focus + .cBlock__inner-label {
    color: #84929E;
    font-size: 12px;
    border: none;
    outline: none;
    margin-top: 10px;
    -moz-transform: translateY(-60px);
    -ms-transform: translateY(-60px);
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
}

/* анимация возврата текста label в нормальное состояние,
 когда пользователь переходит к другому полю формы */
.cBlock__inner-wrapper .cBlock__inner-label {
    color: #5D6C71;
    cursor: text;
    font-size: medium;
    line-height: 100%;
    text-transform: uppercase;
    -moz-transform: translateY(-24px);
    -ms-transform: translateY(-24px);
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    transition: all 0.4s ease;
}

.cBlock__inner-wrapper input:not(:placeholder-shown) + .cBlock__inner-label {
    -moz-transform: translateY(-60px);
    -ms-transform: translateY(-60px);
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
    font-size: 12px;
}

.cBlock__inner-wrapper input:not(:empty) + .cBlock__inner-label {
    transform: translateY(-60px);
    transition: all 0.4s ease;
}

вот ссылка на видео с демо:

https://www.awesomescreenshot.com/video/8288687?key=447c4b0cc98cf0f3aad451c55c4f2b90