Как редактировать FormArray данные, полученные с LocalStorage? Angular 8

Приведенный ниже код ( https://stackblitz.com/edit/angular-ivy-s3ixx8 ) работает, сохраняет в локалсторедж, и все данные (к-во товаров) с него отображаются.

Проблема в следующем: когда перегружаю страницу, не получается редактировать эти данные. То есть, когда кликаю на "+" или "-", а потом делаю сабмит - все равно к-во товаров остается прежним.

app.component.ts:

form: FormGroup;
productsFormArray: FormArray;
localStorageData = [];

constructor() {
  this.form = new FormGroup({
    products: new FormArray([])
  })

  this.productsFormArray = this.form.get('products') as FormArray;
  // get data from localStorage
  this.localStorageData = JSON.parse(localStorage.getItem('dataSource'));

  // if localStorage is not empty
  if (this.localStorageData != null) {
    console.log(this.localStorageData);

    this.localStorageData.map((x, i) =>
      this.productsFormArray.controls.push(new FormControl(x)));
  }
}

// add new product
add() {
  (this.form.get('products') as FormArray).push(new FormControl(0));
}

// count quantity of product
count(n: number, i: number) {
  var value = this.productsFormArray.at(i).value;
  value += n;
  this.productsFormArray.at(i).setValue(value);
}

onSubmit() {
  console.log(this.form.value);
}

saveToLocalStorage() {
  localStorage.setItem('dataSource',
    JSON.stringify(this.form.value.products));
}

https://stackblitz.com/edit/angular-ivy-s3ixx8