Getting the following error: BoatSearchResults.cmp must handle the BoatSelect event by calling a controller function named onBoatSelect

Here is my code:

BoatTile.cmp

<aura:component description="BoatTile">
    <aura:attribute name="boat" type="Boat__c"/>
    <aura:attribute name="selected" type="Boolean" default="false"/>
    <aura:registerEvent name="BoatSelect" type="c:BoatSelect"/>
    <lightning:button name="{!v.boat.Id}" class="{!v.selected ? 'tile selected' : 'tile'}" onclick="{!c.onBoatClick}">
        <div style="{!'background-image: url(' + v.boat.Picture__c + ')'}" class="innertile">
            <div class="lower-third">
                <h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1>
            </div>
        </div>
    </lightning:button>
</aura:component>

BoatTileController.js

({
    onBoatClick: function(component, event, helper) {
        let boatId = event.getSource().get("v.name");
        let boatClickEvent = component.getEvent('BoatSelect');
        boatClickEvent.setParams({'boatId' : boatId});
        boatClickEvent.fire();
    }
});

BoatSelect.evt

<aura:event type="COMPONENT" description="BoatSelect">
    <aura:attribute name="boatId" type="String"/>
</aura:event>

BoatSearchResults.cmp

<aura:component controller="BoatSearchResults" >
	<aura:attribute name="boats" type="Boat__c[]"/>
    <aura:attribute name="selectedBoatId" Type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler name="BoatSelect" event="c.BoatSelect" action="{!c.onBoatSelect}"/>
    <aura:method name="search" action="{!c.doSearch}">
        <aura:attribute  name="boatTypeId" type="String"/>
    </aura:method>
    <lightning:layout multipleRows="true">
        <aura:iteration items="{!v.boats}" var="boat">
            <lightning:layoutItem size="4" padding="around-small">
                <c:BoatTile boat="{!boat}" selected="{boat.Id === v.selectedBoatId ? true : false)}"/>
            </lightning:layoutItem>
        </aura:iteration>
        <aura:if isTrue="{! empty(v.boats)}">
            <lightning:layoutItem size="12" padding="around-small" class="slds-align--absolute-center">
                <lightning:formattedText value="No boats found"/>
            </lightning:layoutItem>
        </aura:if>
    </lightning:layout>
</aura:component>

BoatSearchResultsController.js

({
    doInit: function(component, event, helper) {
        helper.onSearch(component, helper, "");
    },
    doSearch: function(component, event, helper) {
        console.log("BoatSearchResults doSearch");
        let boatTypeId = event.getParam('arguments').boatTypeId;
        console.log("boatTypeId: " + boatTypeId);
        helper.onSearch(component, helper, boatTypeId);
    },
    onBoatSelect: function(component, event, helper) {
        let boatId = event.getParam('boatId');
        component.set('v.selectedBoatId', boatId);
        console.log('selectedBoatId: ' + component.get('v.selectedBoatId'));
    }
});

This code is fully functional, so this is likely something that Trailhead is looking for that I did differently.

Thanks,
Scott Byrd