Why when I update the ForGender to "Women" all the next rows become Women on modal even if the value is Men?

Question

When I click the update button on the 1st row a modal will show up. I try to update the ForGender from Men to Women. The problem is when I try to update the next row (2nd row) and the rest of the row the ForGender field on the modal becomes Women too. But the true value of the ForGender field on the table is Men. Same with my quantity, price, and imageUrl. When I console.log(product.forGender) it's Men but on modal on select input, it's Women. What it's wrong with my update modal? You can see the image below for a better understanding.

Here's my code:

//update the table row

  public onUpdateProduct(product: Product): void {
    this.productServive.updateProduct(product).subscribe(
      (response: Product) => {
        console.log(response);
        this.getAllProduct();
        this.getHasStocks();
        this.getHasNoStocks();
        this.onCloseUpdateHandled();
        this.successMessage("updated");
      },
      (error: HttpErrorResponse) => {
        this.errorMessage(error.message);
      }
    );
  }

//retrieve the product attribute on the modal

public updateClick(product: Product) {
    this.editProduct = product;
    this.openUpdateModal();
  }

//open the update modal
  openUpdateModal() {
    this.updateDisplay = "block";
  }
//close the update modal
  onCloseUpdateHandled() {
    this.updateDisplay = "none";
  }

//update button

<button class="btn btn-success btn-sm me-2" (click)="updateClick(product)">Update</button>

//update modal

<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display':updateDisplay}">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Update Product - {{editProduct?.name}}</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="onCloseUpdateHandled()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form #editForm="ngForm">
        <div class="modal-body">
          <input type="hidden" class="form-control" id="id" ngModel="{{editProduct?.id}}" name="id">
          <div class="mb-3">
            <label for="name" class="col-form-label">Name:</label>
            <input type="text" class="form-control" id="name" ngModel="{{editProduct?.name}}" name="name" required>
          </div>
          <div class="mb-3">
            <label for="description" class="col-form-label">Description:</label>
            <input type="text" class="form-control" id="description" ngModel="{{editProduct?.description}}" name="description" required>
          </div>
          <div class="mb-3">
            <label for="productType" class="col-form-label">Type:</label>
            <input type="text" class="form-control" id="productType" ngModel="{{editProduct?.productType}}" name="productType" required>
          </div>
          <div class="mb-3">
            <label for="forGender" class="col-form-label">ForGender:</label>
            <select class="form-select" id="forGender" ngModel="{{editProduct?.forGender}}" name="forGender" required>
              <option value="" selected disabled>Select ForGender</option>
              <option value="Men" name="forGender">Men</option>
              <option value="Women" name="forGender">Women</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="price" class="col-form-label">Price:</label>
            <input type="number" class="form-control" id="price" min=0 oninput="validity.valid||(value='');" ngModel="{{editProduct?.price}}" name="price" required>
          </div>
          <div class="mb-3">
            <label for="quantity" class="col-form-label">Quantity:</label>
            <input type="number" class="form-control" id="quantity" min=0 oninput="validity.valid||(value='');" ngModel="{{editProduct?.quantity}}" name="quantity" required>
          </div>
          <div class="mb-3">
            <label for="quantity" class="col-form-label">Image Url:</label>
            <input type="text" class="form-control" id="imageUrl" ngModel="{{editProduct?.imageUrl}}" name="imageUrl" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" [disabled]="editForm.invalid" (click)="onUpdateProduct(editForm.value)" class="btn btn-primary btn-sm me-2">Update Product</button>
        </div>
      </form>
    </div>
  </div>
</div>