Custom Path Component in Aura

path.cmp

<aura:component >
    <aura:attribute name="currentStep" type="String" />
    <aura:attribute name="steps" type="String[]" />

    <aura:attribute name="renderInfo" access="private" type="Object[]" />
    
    <aura:registerEvent name="onselect" type="c:valueSelected" />
    
    <aura:handler name="init" value="{!this}" action="{!c.update}" />
    <aura:handler name="change" value="{!v.steps}" action="{!c.update}" />
    <aura:handler name="change" value="{!v.currentStep}" action="{!c.update}" />

    <div class="slds-path-coach">
        <div class="slds-grid">
            <div class="slds-tabs_path" role="application">
                <ul class="slds-tabs_path__nav" role="listbox" aria-orientation="horizontal">
                    <aura:iteration items="{!v.renderInfo}" var="item" indexVar="index">
                        <li class="{!'slds-tabs_path__item '+item.state}" role="presentation">
                            <a onclick="{!c.click}" aria-selected="{!item.selected}" 
                                class="slds-tabs_path__link" title="{!item.label}"
                                role="option" tabindex="-1" data-index="{!index}">
                                <span class="slds-tabs_path__stage">
                                    <lightning:icon size="x-small" iconName="utility:check" />
                                    <span class="slds-assistive-text">
                                        {!item.label}
                                    </span>
                                </span>
                                <span class="slds-tabs_path__title">
                                    {!item.label}
                                </span>
                            </a>
                        </li>
                    </aura:iteration>
                </ul>
            </div>
        </div>
    </div>
</aura:component>

pathController.js

({
    click: function(component, event, helper) {
        var index = parseInt(event.target.dataset.index), 
            value,
            onselect;
        if(index !== undefined) {
            event.preventDefault();
            value = component.get("v.steps")[index];
            component.set("v.currentStep", value);
            onselect = component.getEvent("onselect");
            onselect.setParams({ value: value });
            onselect.fire();
            helper.renderState(component);
        }
    },
    update: function(component, event, helper) {
        helper.renderState(component);
    }
})

pathHelper.js

({
    renderState: function(component) {
        var currentStep = component.get("v.currentStep"),
            allSteps = component.get("v.steps"),
            render = [],
            state = "slds-is-complete";
        allSteps.forEach(function(step){
            if(currentStep === step) {
                state = "slds-is-current";
            } else if(state === "slds-is-current") {
                state = "slds-is-incomplete";
            }
            render.push({ label: step, selected: state === "slds-is-current", state: state });
        });
        component.set("v.renderInfo", render);
    }
})

valueSelected.evt

<aura:event access="global" type="COMPONENT" description="Event fired when a value is selected">
    <aura:attribute name="value" type="Object" access="global" />
</aura:event>

it is showing empty white page for above code output