Angular mat-autocomplete not showing dropdown options

Question

I am using an autocomplete so that an option can be selected. The dropdownlist previously worked however that is no longer the case. I am no longer seeing the options. I displayed the options in a div and I am seeing where the options are indeed coming back they are just not showing in the dropdown

 <form class="main-search">
    <mat-form-field  appearance="fill">
      <span class="input-min-text">Lookup Address</span>
    <input type="text"
           placeholder="Begin your search e.g. ‘CRO 3RL’ or ’36 Factory Land’"
           aria-label="Begin your search"
           matInput
           [formControl]="LocationCtrl"
           [matAutocomplete]="auto"
           [(ngModel)]="searchInput">
   <!-- show this button only if the search box is empty -->
    <button *ngIf='!searchInput' matSuffix mat-icon-button aria-label="Search" class="button-1"><img src="../assets/icons/magnifying-glass-solid.svg" /></button>
       <!-- show this button only if the search box is not empty -->
    <button *ngIf='searchInput' matSuffix mat-icon-button aria-label="Clear" class="button-2" (click)="clearSearch()"><img src="../assets/icons/xmark-solid.svg" /></button>
  
  
    <mat-autocomplete #auto="matAutocomplete">
      <!-- <label class="results-heading">Results</label> -->
      <mat-option *ngFor="let location of filteredLocations | async" [value]="location.address">
        <div>
        <span class="min-text">{{location.location_name}}</span> 
        <span class="medium-text">{{location.address}}</span> 
        <span class="min-text">{{location.smartcode}}</span> 
        </div>
      </mat-option>
    </mat-autocomplete>
  
  </mat-form-field>

  <div *ngIf="filteredLocations | async">
    <div *ngFor="let a of filteredLocations | async">
      <span>{{a.location_name}}, {{a.address}}, {{a.smartcode}}</span>
    </div>
  </div>
    
</form>

TS FILE

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
import {FormControl} from '@angular/forms';
import {map, startWith} from 'rxjs/operators';

export interface Location {
  location_name: string;
  address: string;
  smartcode: string;
}

@Component({
  selector: 'app-search-box',
  templateUrl: './search-box.component.html',
  styleUrls: ['./search-box.component.scss']
})



export class SearchBoxComponent implements OnInit {

  //the search textbox
  searchInput = '';

  LocationCtrl = new FormControl();
  filteredLocations: Observable<Location[]>;

  locations: Location[] = [
    {
      location_name: 'Home',
      address: '3 Racecourse, Maldives',
      code: '28383'
    },

    {
      location_name: 'School',
      address: '4 Bluehole, RockyPoint',
      code: '4894884'
    },
  ];

  constructor() {
    this.filteredLocations = this.LocationCtrl.valueChanges.pipe(
      startWith(''),
      map(location => (location ? this._filterLocations(location) : this.locations.slice())),
    );

  }

  ngOnInit(): void {

  }


  private _filterLocations(value: string): Location[] {
    const filterValue = value.toLowerCase();
    // this does the filter and currently filters on the address
    return this.locations.filter(location => location.address.toLowerCase().includes(filterValue));
  }


  //clear search box
  clearSearch()
  {
    this.searchInput = '';
  }
}