Как стабилизировать плавающие метки в React с помощью Tailwind CSS?

Я пытаюсь создать регистрационную форму, используя React и Tailwind CSS. Когда я фокусируюсь на форме ввода, метка скользит вверх. Пока здесь нет проблем. Однако, когда я фокусируюсь на другом вводе, метка ввода, на котором я ранее сосредоточился, становится заполнителем. То есть метка, которая только что переместилась вверх, возвращается на свое место. Мои коды следующие:

<div className = "relative mb-4">
              <input
                type = "text"
                id = "username"
                name = "username"
                value = {formData.username}
                onChange = {handleChangeEvent}
                className = "peer p-3 h-10 w-full border-b-2 border-gray-300 text-gray-900 placeholder-transparent focus-within:outline-none focus-within:border-rose-600"
                placeholder = ""
                required
              />
              <label
                htmlFor = "username"
                className = {`absolute left-1 top-2 transition-all text-gray-400 ${formData.username.length > 0 ? 'text-md' : 'text-base'
                  } ${formData.username.length > 0 ? 'text-gray-400' : ''
                  } peer-focus-within:left-0 peer-focus-within:-top-6 peer-focus-within:text-gray-700 peer-focus-within:text-md peer-focus-within:text-bold`}
              >
                Username
              </label>
            </div>

Скриншоты

Проблема хорошо видна на четвертом скриншоте. Как я могу решить эту проблему? Заранее спасибо!

Я попытался выполнить некоторые проверки, используя строки шаблона и тернарный оператор, но так и не смог решить эту проблему.