How to pass the user input from Child to Parent in Salesforce LWC

video link
=======
https://www.youtube.com/watch?v=Hh3nEIk9sws&t=227s

childComponent.html
===================
<template>
    <lightning-input type="text"  style="width:15%;" label="FirstName" placeholder="Enter the FirstName"  onchange={handleChangeFirstName}>
    </lightning-input>
</template>

childComponent.js
=================
import { LightningElement,api } from 'lwc';
export default class ChildComponent extends LightningElement {
    @api firstname;
    handleChangeFirstName(event){
        this.firstname=event.target.value;
        const sampleEvent=new CustomEvent('inputcarryevent',{
            detail:this.firstname
        });
        this.dispatchEvent(sampleEvent);
    }

}

parentComponent.html
====================
<template>
    <c-child-component oninputcarryevent={handlechange}>
    </c-child-component>
    FirstName is:{firstname}
</template>

parentComponent.js
==================
import { LightningElement,api } from 'lwc';
export default class ParentComponent extends LightningElement {
    @api firstname;
    handlechange(event){
        this.firstname=event.detail;
    }
}

LightningApplication
====================
<aura:application extends="force:slds">
    <c:parentComponent/>
</aura:application>