I am using below code the render a child component which has the force:inputField but in the UI child component`s markup(field for entering the details) is not visible, it`s working if i directly call the child component from Parent one 

Parent Component:-

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="contact" type="Contact" default="{ 'sobjectType': 'Contact','FirstName':'Parent Test'}"/>    
    
    <lightning:tabset>
        
        <lightning:tab label="Item One" id='1'>
            Item one
        </lightning:tab>
        <lightning:tab label="Item two"  id='2'>
            <c:TestNavigateToComponent/>
        </lightning:tab>
    </lightning:tabset>
</aura:component>



Child Component:-


<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="contact" type="Contact" default="{ 'sobjectType': 'Contact','FirstName':'Child Test' }"/>    
    
    <div class="slds">
        Test Navigate
        <force:inputField aura:id="checkcontact" value="{!v.contact.FirstName}"/>
        
        <force:inputField aura:id="checkcontact1" value="{!v.contact.LastName}"/>
    </div>
    
</aura:component>



Result:-



Please let me know if someone has faced this Problem and figured out how to fix it.

PS:-  i know we can use lightning:inputField instead but i am looking to acchieve this from Force:inputField only if that is possible