Input field animation problem after filling the details

.input_field{
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 2px solid black;
  outline: none;
  font-size: 16px;
}
.input_label{
  position: absolute;
  left: 20px;
  top: 20px;
  pointer-events: none;
  font-size: 16px;
}
.input_field:focus{
  border-color: crimson;
}
.input_field::placeholder {
  color: #fff;
  opacity: 1; /* Firefox */
}

.input_field:-ms-input-placeholder { 
 color: #fff;
}

.input_field::-ms-input-placeholder { 
 color: #fff;
}
.input_field:not(:placeholder-shown) ~ label {
      top: 275px;
      transition: 0.3s;
      color: crimson;
}

<input className='input_field' type="number" name="number" placeholder='enter number'
                                autoComplete='off'
                                value={formValues.number}
                                onChange={handleChange}
                                style={{width:"180px",height:"35px"}}
                        />
 <label className='input_label'>Mobile Number</label>