MDB Form-Label covers input field when there is input.

Expected behavior The form label should move out of the way and remain that way if there is an input within the input field.

Actual behavior The label covers the field regardless of whether there is something there.

Resources (screenshots, code snippets etc.)

      <div className={`tab-pane fade ${activeTab === 'pills-login' ? 'show active' : ''}`} id="pills-login" role="tabpanel" aria-labelledby="tab-login">
        {error && <div className="alert alert-danger">{error}</div>}
        {/* Display error alert */}
        <form onSubmit={handleLoginSubmit}>
          {/* Usename input */}
          <div className="form-outline mb-4">
            <input type="text" id="loginName" name="username" className="form-control" onChange={handleChange} required />
            <label className="form-label" htmlFor="loginName">
              Username
            </label>
          </div>