I have a angular form with mulits-select dropdown. the multiselect field markkup is like this:

<mat-form-field appearance="outline">
  <mat-label>Food Categories</mat-label>
   <mat-select 
    ngModel name="categories"
    #categories="ngModel"
    multiple>
   <mat-option *ngFor="let foodCategory of foodCategories | async [value]="foodCategory.categoryName">{{foodCategory.categoryName}}
  </mat-option>
  </mat-select>
  </mat-form-field>

and in my component I am using this code:

onSubmit(form:NgForm){
    console.log(form);
    this.itemService.createItem(
      {categories:[form.value.categories],
      }
    );

In the interface the categories is defined like:

export interface FoodItem {  
    categories: string[];
}

and item-service.ts - the code is like

createItem(foodItem: FoodItem) {
    const foodItemCollection = this.afs.collection<FoodItem>('foodItems');  
  foodItemCollection.add({     
    categories:foodItem.categories,
   }).then(res=>{
    console.log(res);
  });

and when I submit the form the cosole.log for form data shows like this: value: {categories: Array(2)}

There are other fields in the form, but I removed for I think not needed here for the issue I am facing.

The error which is shown is like:

core.js:6479 ERROR FirebaseError: Function addDoc() called with invalid data. Nested arrays are not supported (found in document foodItems/51dDi3OtfMo0NRW90ecd)

Note: when I add the values directly in add-item-component.ts like below it works:

onSubmit(form:NgForm){
        console.log(form);
        this.itemService.createItem(
          {categories:['Chowmin','Chinese'],
          }
        );