Select value from dropdown from and taking another value from same collection from firebase

Question

I am trying to get use a selected value from a field in firestore and use another field value to show in input from the same collection.

html file

<form [formGroup]="newForm">
 <div class="form-group">
   <label for="formProductLabel">Product Label</label>
   <select type="text" class="form-control" id="formProductLabel" formControlName="productLabel">
     <option [ngValue]="product" *ngFor="let product of product$ | async;">{{product.productLabel}}</option>
   </select>
 </div>
 <div class="form-group">
   <label for="formProductType">Product Type</label>
   <input type="text" class="form-control" id="formProductType" value="{{newForm.controls['product'].value.productType}}">
 </div>
</form>

.ts file

this.product$ = this.db.getCollection('products').pipe(); this.product$.subscribe((product: any) => console.log(product));

When I run this, it says "TypeError: Cannot read properties of undefined (reading 'value')"

How do I go about solving this?

I tried <input type="text" class="form-control" id="formProductType" value="{{newForm.controls['product']?.value.productType}}"> but it didn't show any value in the input field