我尝试使用React和Tailwind CSS创建一个注册表单，当我关注一个输入表单时，标签会向上滑动，直到这里都没有问题，但是当我关注另一个输入时，我之前关注的输入的标签变成了占位符，也就是说，刚刚向上移动的标签会回到原来的位置。我的代码如下：

<div className="relative mb-4">
              <input
                type="text"
                id="username"
                name="username"
                value={formData.username}
                onChange={handleChange}
                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>

截图

问题在第四张截图中清晰可见。我如何解决这个问题？提前感谢！
我尝试使用模板字符串和三元运算符执行一些检查，但我仍然无法解决它。