I have a lwc in which I have a lookup field and pick-list field, where lookup field is a child component and pick-list field is standard lightning-input.

Here's the screenshot of the UI:

Problem is, I am only able to select value in the first instance of lookup field, and that same value populates in the second instance too. I am not able to select different value.

Here's the .html

<template for:each={itemList} for:item="item" for:index="index">
        <lightning-record-edit-form key={item.id} object-api-name=OpportunityTeamMember onsuccess={handleSuccess} onsubmit={handleSubmit} onerror={handleError}> 
            {item} &nbsp;{index}
            <div class="bodyContainer slds-scrollable">
                <template if:true={showSpinner}>
                    <div class="spinnerContainer">
                        <lightning-spinner alternative-text="Loading..." size="large" variant="brand"></lightning-spinner>
                    </div>
                </template>
                <div class="slds-section slds-is-open slds-m-top_xxx-small slds-m-right_x-small slds-m-left_x-small slds-p-right_x-small slds-p-left_x-small">
                    <div class="slds-section__content">
                        <div class="slds-form slds-form_stacked">
                            <lightning-layout class="slds-wrap" horizontal-align="spread" multiple-rows="true">
                                <lightning-layout-item size="5" class="slds-p-horizontal_xxx-small">
                                    <div key={item.id} class="slds-form-element slds-form-element_edit">
                                        <c-lookup
                                            selection={userSelection}
                                            errors={errors}
                                            onfocus={handleLookupFocus}
                                            onsearch={handleSearch}
                                            onselectionchange={handleSelectionChange}
                                            label="User Id"
                                            placeholder="Search User..."
                                            is-multi-entry={isMultiEntry}
                                            required>
                                        </c-lookup>
                                    </div>
                                </lightning-layout-item>
                                <lightning-layout-item size="5" class="slds-p-horizontal_xxx-small">
                                    <div class="slds-form-element slds-form-element_edit">
                                        <lightning-input-field 
                                                data-inputname="teamRoleField"
                                                field-name="TeamMemberRole"
                                                name="Role"
                                                value={role}
                                                variant="label-stacked"
                                                required
                                                >
                                        </lightning-input-field>
                                        <br/><br/><br/><br/><br/>
                                    </div>
                                </lightning-layout-item>

                                <lightning-layout-item size="2"
                                    padding="around-small">
                                <div>
                                    <lightning-icon class="slds-var-m-around_xx-small" icon-name="action:new" access-key={item.id} id={index}
                                        alternative-text="Add Row" size="small" title="Add Row" onclick={addRow}>
                                    </lightning-icon>
                                    <lightning-icon class="slds-var-m-around_xx-small" icon-name="action:delete" access-key={item.id} id={index}
                                        alternative-text="Delete Row" size="small" title="Delete Row" onclick={removeRow}>
                                    </lightning-icon>
                                </div>
                                </lightning-layout-item>
                            </lightning-layout>
                        </div>
                    </div>
                </div>
            </div>
        </lightning-record-edit-form>
        </template>

.JS

addRow() {
    ++this.keyIndex;
    var newItem = [{ id: this.keyIndex }];
    this.itemList = this.itemList.concat(newItem);
}

removeRow(event) {
    if (this.itemList.length >= 2) {
        this.itemList = this.itemList.filter(function (element) {
            return parseInt(element.id) !== parseInt(event.target.accessKey);
        });
    }
}

handleLookupFocus(event){
    if (event.detail.hasSearchInput) {
        return;
    }
    getRecent()
        .then((results) => {
            this.template.querySelector('c-lookup').setSearchResults(results);
        })
        .catch((error) => {
            this.notifyUser('Lookup Error', 'An error occured while searching with the lookup field.', 'error');
            // eslint-disable-next-line no-console
            this.errors = [error];
        });
}

handleSearch(event) {
    apexSearch(event.detail)
        .then((results) => {
            this.template.querySelector('c-lookup').setSearchResults(results);
        })
        .catch((error) => {
            this.notifyUser('Lookup Error', 'An error occured while searching with the lookup field.', 'error');
            console.error('Lookup search error', JSON.stringify(error));
            this.errors = [error];
        });
}

//sets the selection in the Lookup field and the selected user's id
handleSelectionChange(event){
    this.userSelection = this.template.querySelector('c-lookup').getSelection();
    console.log('user selection');
    console.log(this.userSelection);
    this.userId = (this.userSelection && this.userSelection.length) ? this.userSelection[0].id : undefined;
}

How do I Initiate the lookup component again in the new row and get values of both?