How to pass multiple values from Child component to Parent component in LWC

childFile.html
<template>
    <div class="sampleForm" style="width:20%;">
        <lightning-input type="text" label="FirstName">
        </lightning-input>
        <lightning-input type="text" label="LastName">
        </lightning-input>
    </div>    
    <lightning-button label="Fire the event" variant="success" onclick={handleClick}>
    </lightning-button>
</template>

childFile.js
import { LightningElement,api } from 'lwc';
export default class ChildFile extends LightningElement {
    @api fname;
    @api lname;
    handleClick(){
        this.template.querySelectorAll("lightning-input").forEach(item => {
            let currentLabel=item.label;
            let currentVal=item.value;
            if(currentLabel==="FirstName"){
                this.fname=currentVal;
                console.log('@'+this.fname);
            }
            else{
                this.lname=currentVal;
                console.log('@@'+this.lname);
            }
            const newEvent=new CustomEvent('inptucarryevent',{
                detail:{
                    FirstName:this.fname,
                    LastName:this.lname
                }
            });
            this.dispatchEvent(newEvent);
        });
    }
}

parentFile.html
<template>
    <c-child-file oninptucarryevent={handleClick}>
    </c-child-file>
    <div if:true={showForm}>
        FirstName is:{fnm}<br/>
        LastName is:{lnm}
    </div>    
</template>

parentFile.js
import { LightningElement,api } from 'lwc';
export default class ParentFile extends LightningElement {
    @api fnm;
    @api lnm;
    @api showForm=false;
    handleClick(event){
        this.showForm=true;
        this.fnm=event.detail.FirstName;
        this.lnm=event.detail.LastName;
    }
}
LightningApplication
<aura:application extends="force:slds" >
    <c:parentFile/>
</aura:application>