Autocomplete control shows ObjectObject instead of the name

I am trying to use AutoComplete

enter image description here

But when I select a value, the display value shows Object Object

enter image description here

My code is

  <div id="practice-questions-tags-form-div" > 
    <label id="tag-selection-label" for="language-selector" class="control-label "> Select a tag from list or type name of the tag</label>
    <form id="tags-selection-form" class="practice-question-form form-inline" [formGroup]="languageSelectorForm" (ngSubmit)="getQuestionsForSelectedLanguage()" novalidate>
      <mat-form-field id="language-selector" class="example-full-width">
        <input type="text" placeholder="Select Tag or type tag name" aria-label="Number" matInput formControlName="tags" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let tag of filteredTags | async" [value]="tag">
            {{ tag.subject }}
      <button type="submit"  id="tags-submit-button" class="unselected-button"> Get Questions </button>
      <app-show-errors id="tag-selection-error" [control]="languageSelectorForm.controls.tags"></app-show-errors>

filteredTag is of type

public filteredTags: ReplaySubject<Tag[]> = new ReplaySubject<Tag[]>(1);

and Tag is an object of type

export class Tag {
    public course: string,
    public subject: string,
    public topic: string
  ) {}

What am I doing wrong?

Source: Angular Material Quesions