Communication between Aura Component and LWC Component

Placed a lwc component to aura component and passing data from lwc to aura component.

lwcComponent.cmp: 

<template>

    <div class="slds-m-around_small">

        <lightning-button label="dispatch event" variant="brand" onclick={handleClick}>

</lightning-button>

    </div>

</template>

lwcComponent.Js:

import { LightningElement, api } from 'lwc';

export default class LwcAuraComponent extends LightningElement {

    

    handleClick(){

        var event = new CustomEvent(

            "select",

            {

                detail : {

                    message: "From LWC Component"

                }

            }

            

            );

        this.dispatchEvent(event);

    }

    @api

    childMethod(){

        alert('Call childMethod is successfully done.');

    }

}

------------------------------------------- aura component ----------------------------

auraComponent.cmp:

<aura:component>

    <lightning:card title="Aura - Lwc" iconName="custom:custom34">

        <div>

            <c:lwcAuraComponent onselect="{!c.doHandleEvent}" aura:id="auraComp">

            </c:lwcAuraComponent>

        </div>

    <br/>

     <lightning:button label="aura event" variant="brand" onclick="{!c.handleAura}">

     </lightning:button>

    </lightning:card>

</aura:component>

auraComponentController.js:

({

    doHandleEvent : function(component, event, helper) {

        const message = event.getParam('message');

        alert('Event Handled. Message : '+message);

    },

    handleAura: function(component,event,helper){

        var callChild = component.find('auraComp');

        callChild.childMethod();

    }

})