I am rendering Accounts with their contacts in lightning component and showing account lookup field on child contacts But account lookup is not coming using force:inputfield in the contact section. However, when I  printed the accountid on page, it's coming but lookup not rendering.

Please help and find the below code!
<aura:component controller="Account_with_contacts_controller" implements="force:appHostable,flexipage:availableForAllPageTypes">    
    <aura:attribute name="listaccount" type="Account_with_contacts_controller.Wrapper_Account[]"/>    
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   <aura:attribute name="contact" type="Contact" 
               default="{ 'sobjectType': 'Contact' }"/>
    <div class="slds-grid slds-m-around--medium ">
        <table class="slds-table slds-table--bordered slds-max-medium-table--stacked">
            <thead>
                <tr class="slds-text-heading--label">
                     <th scope="col"> </th>
                    <th scope="col">ID </th>
                    <th scope="col">Name</th>
                    <th scope="col">Phone</th>
                    <th scope="col">Billing City</th>

                </tr>
            </thead>
            <tbody>
                <aura:renderIf isTrue="{!v.listaccount.length!=0}">
                <aura:iteration items="{!v.listaccount}" var="item" indexVar="i">
                    <tr>
                        <td>
                          
                        </td>                           
                         <td>
                            <label class="slds-checkbox">
                                <ui:inputCheckbox class="selector" aura:id="{!i}" value="{!item.selected}" change="{!c.selectcheckbox}"/>
                                <span class="slds-checkbox--faux"></span>
                            </label>
                        </td>   
                        <td><ui:inputtext class="field" value="{!item.Name}"/></td>
                        
                        <td><ui:inputtext class="field" value="{!item.Phone}"/></td>
                        <td><ui:inputtext class="field" value="{!item.BillingCity}"/></td>
                         <aura:iteration items="{!item.Contacts}" var="contactitem" indexVar="j">
                          
                    <tr>
                        <td>
                          
                        </td>                           
                            
                        <td><ui:inputtext class="field" label="name" value="{!contactitem.Name}"/></td>
                        <td width="50%">{!contactitem.AccountId}<force:inputField value="{!contactitem.AccountId}"/> </td>
                        <td><ui:inputtext class="field" label="phone" value="{!contactitem.Phone}"/></td>
                        <td><ui:inputtext class="field" value="{!contactitem.Description}"/></td>
                        
                    </tr>      
                </aura:iteration> 
                    </tr>      
                </aura:iteration> 
                </aura:renderIf>
            </tbody>
        </table> 
    </div>
    
        <div>
        <button    style="float:centre" class="slds-button slds-button--brand slds-m-bottom--large slds-align--absolute-center btn-lg" onclick="{!c.UpdateAccounts}">Update Accounts</button>
        <br/>    
           </div>
</aura:component>