Because form-group, form-row, and form-inline classes have been removed in Bootstrap 5: I have resorted to using gy-. eg(gy-2)

<div class="card">
   <div class="card-body">
       <div class="row">
           <div class="col-lg-2 gy-2">
               <select class="form-control">
                   <option>invoice</option>
                   <option>qoutation</option>
               </select>
           </div>
           <div class="col-lg-2 gy-2">
               <select class="form-control product-select" name="state">
                   <option value="AL">Search Product..</option>
               </select>
           </div>
       </div>
   </div>
</div>

The reason is form-group, form-row, and form-inline classes have been removed in Bootstrap 5:

Breaking change: Dropped form-specific layout classes for our grid system. Use our grid and utilities instead of .form-group, .form-row, or .form-inline.

https://getbootstrap.com/docs/5.0/migration/#forms

So Grid and Utilities are supposed to be used instead.

...but if you are looking for a quick solution, here's how these classes were working in Bootstrap 4:

.form-group {
  margin-bottom: 1rem;
}

.form-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

label {
  margin-bottom: 0.5rem;
}