I have a very simple class,

class LocationSearch extends BaseComponent {

    constructor(element) {
        super(element);
        
        this.initializeSearch();
    }

    initializeSearch() {
        this.service = new window.google.maps.places.AutocompleteService();
        this.service.getPlacePredictions({
            input: 'The Black Bull'
        }, this.displayResults);
   }

   displayResults(predictions, status) {
       if(status !== window.google.maps.places.PlacesServiceStatus.OK) {
            this.searchResults = [];
            return false;
        }

        const results = predictions.map((prediction) => prediction.structured_formatting);
        const resultsWrapper = SelectorEngine.findOne('.location-search-results-list');
        results.forEach((result) => {
            const item = this.createItemMarkup(result);
            resultsWrapper.append(item);
        });
    }
    

    createItemMarkup(item) {
        const { main_text, secondary_text} = item;
        const listElement = document.createElement('li');
        const buttonElement = document.createElement('button');
        const firstLine = document.createTextNode(main_text);
        const lineBreak = document.createElement('br');
        const secondLine = document.createTextNode(secondary_text);

        buttonElement.setAttribute('class', 'location-search-results-list__item');
        buttonElement.setAttribute('type', 'button');
        buttonElement.setAttribute('role', 'option');

        buttonElement.append(firstLine)
            .append(lineBreak)
            .append(secondLine);
        
        listElement.append(buttonElement);

        return listElement;

    }
}

When entering the forEach portion of the displayResults method I get the following error,

Cannot read properties of undefined (reading 'createItemMarkup')

I cant figure out what is going on to make it undefined?