How to pass the value from one Component to other Component with event in LWC

Video link
=========
https://youtu.be/W9-ANZgxXZI


Apex Class
==========
public with sharing class AccountDemoController {
    public AccountDemoController() {
    }
    @AuraEnabled(cacheable=true)
    public static List<Account> displayAcntRecords(){
        List<Account> acclist=[select Id,Name from Account LIMIT 5];
        return acclist;
    }
    @AuraEnabled(cacheable=true)
    public static List<Contact> displayConRecords(String accId){
        System.debug('@@AccountId@@'+accId);
        List<Contact> conlist=[select Id,LastName,AccountId from Contact where AccountId=:accId];
        return conlist;
    }
}

childComp2.html
===============
<template>
<b>Accounts</b>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-m-top_small">
        <tr>
            <th>Select</th>
            <th>AccountName</th>
        </tr>
        <template for:each={accounts.data} for:item="acc">
            <tr key={acc.Id}>
                <td>
                    <lightning-input type="radio" name="radioButton" onchange={handleChange} value={acc.Id}>
                    </lightning-input>
                </td>
                <td>
                    {acc.Name}
                </td>
            </tr>
        </template>
    </table>
</template>

childComp2.js
=============
import { LightningElement,wire } from 'lwc';
import displayAcntRecords from '@salesforce/apex/AccountDemoController.displayAcntRecords';
export default class ChildComp2 extends LightningElement {
    @wire(displayAcntRecords) accounts;
    accountId;
    handleChange(event){
        this.accountId=event.target.value;
        console.log(this.accountId);
        const sampleEvent=new CustomEvent('sampledemoevent',{
            detail:this.accountId
        });
        this.dispatchEvent(sampleEvent);
    }
}

parentComp2.html
================
<template>
  <c-child-comp2 onsampledemoevent={handlechange}>
  </c-child-comp2>
<b>Contacts</b>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-m-top_small">
        <tr>
          <th>LastName</th>
        </tr>
        <template for:each={records} for:item="con">
            <tr key={con.Id}>
                <td>
                  {con.LastName}
                </td>
            </tr>
        </template>
    </table>
</template>

parentComp2.js
==============
import { LightningElement,track,api,wire } from 'lwc';
import displayConRecords from '@salesforce/apex/AccountDemoController.displayConRecords'
export default class ParentComp2 extends LightningElement {
    @track accountId;
    @api records;
    @api error;
    @wire(displayConRecords, {accId:'$accountId'})
    wiredContact({ error, data }) {
        if (data) {
            this.records = data;
            this.error=undefined;
     
        } else {
            this.error=error;
            this.records = undefined;
        }
    }
    handlechange(event){
       this.accountId=event.detail;

    }
}

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