Hi I am getting this error when i call one component from another component by clicking on the button.

Comp2CompNav:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:isUrlAddressable" description="c:Comp2CompNav component" access="global" >
    <aura:attribute name="firstname" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
    Hello {!v.firstname}.
</aura:component>    

js: 
({
    doinit: function(cmp, evt, helper) {
        var myPageRef = cmp.get("v.pageReference");
        var firstname = myPageRef.state.c__firstname;
        console.log('Check value with new way of fetching: '+firstname);
        cmp.set("v.firstname", firstname);
    }
})


Comp2CompNav2:
From this component I am calling another Component.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" description="c:Comp2CompNav2 component" access="global" >
    
    <aura:attribute name="pageReference" type="Object"/>
    <aura:handler name="init" value="{!this}" action="{!c.doinit }"/>
    <lightning:navigation aura:id="navService"/>
    <lightning:button label="Navigate" onclick="{!c.handleClick}"/>
</aura:component>    


js:

({
    doinit : function(component, event, helper) {
        var pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__Comp2CompNav',
            },
            state: {
                "c__firstname": "John"
            }
        };
        component.set("v.pageReference", pageReference);
     },
     handleClick: function(component, event, helper) {
        var navService = component.find("navService");
        var pageReference = component.get("v.pageReference");
       // event.preventDefault();
        navService.navigate(pageReference);
    }
})