[SalesForce] Trailhead challenge error secure lightning javascript code

In this challenge I have to use securefilter library and securely encode the date.
I have made the changes as follows-

<aura:component controller="LTNG_Creatures_Controller" access="global" implements="force:appHostable">
    <aura:attribute name="creatures" type="string"/>
    <ltng:require scripts="{!$Resource.securefilters}" /> <!-- CHANGE 1 HERE-->
    <div class="slds-row slds-align--absolute-center">
        <div class="slds-panel slds-size--4-of-6 ">
            <ui:outputText value="Click the button to get all Creatures" /><BR />
            <ui:button label="Get All Creatures" press="{!c.getAllCreaturesAction}"/><BR />
            <BR />

            <aura:unescapedHTML value="{!v.creatures}" />
        </div>
    </div>

</aura:component>

And my controller class is-

({
    getAllCreaturesAction : function(component, event, helper) {
        var getAccountsAction = component.get("c.getAllCreatures");
        getAccountsAction.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                var results = response.getReturnValue();

                // Let's create a beautiful table with results:
                var outputT = "<table class=\"slds-table slds-table--bordered slds-table--cell-buffer \">";
                outputT += "<thead><tr class=\"slds-text-title--caps\">";
                outputT += "<th scope=\"col\"><div class=\"slds-truncate\" title=\"Id\">Id</div></th>";
                outputT += "<th scope=\"col\"><div class=\"slds-truncate\" title=\"Name\">Name</div></th>";
                outputT += "<th scope=\"col\"><div class=\"slds-truncate\" title=\"Description\">Description</div></th>";
                outputT += "<th scope=\"col\"><div class=\"slds-truncate\" title=\"Region\">Region</div></th>";
                outputT += "</tr></thead><tbody>";
                for (var i=0;i<results.length;i++) {
                    outputT += "<tr><th scope=\"row\" data-label=\"Id\"><div class=\"slds-truncate\" title=\"Id\">" + results[i].Id + "</div></th>";
                    outputT += "<td data-label=\"Name\"><div class=\"slds-truncate\" title=\"Name\">" + results[i].Name + "</div></td>";
                    outputT += "<td data-label=\"Name\"><div class=\"slds-truncate\" title=\"Description\">" + results[i].Description__c + "</div></td>";
                    outputT += "<td data-label=\"Company\"><div class=\"slds-truncate\" title=\"Region\">" + results[i].Creature_Region__r.Name + "</div></td></tr>";
                }
                outputT += "</tbody></table>";
                outputT = secureFilters.html(outputT); // CHANGE 2 HERE
                component.set("v.creatures", outputT);
            }
        });
        $A.enqueueAction(getAccountsAction);
    }
})

However it is giving me error that –

Challenge Not yet complete… here's what's wrong: The
'LTNG_SecureFilters_Challenge' controller does not appear to be using
the secureFilters resource properly.

As per my understanding this is right. what might be causing this error?
any help?