Dynamic search functionality in Lightning Web Component with event

public with sharing class AccountDataController {
    public AccountDataController() {

    }
    @AuraEnabled
    public static List<Account> displayAccounts(String searchekey){
        String searchword='%'+searchekey+'%';
        List<Account> returnlist=new List<Account>();
        if(!String.isBlank(searchekey))
        for(Account acc:[select Id,Name,Site from Account where Name like:searchword]){
            returnlist.add(acc);

        }
        return returnlist;
    }
}
searchAccountComponent.html
<template>
    <lightning-input type="text"  class="accName" label="SearchAccounts" onchange={handleSearch}>
    </lightning-input>
</template>

searchAccountComponent.js
import { LightningElement,api } from 'lwc';

export default class SearchAccountComponent extends LightningElement {
    
    @api userInput;
    handleSearch(event){
        this.userInput=event.target.value;
        const newEvent=new CustomEvent('inputcarryevent',{
            detail:this.userInput

        });
        this.dispatchEvent(newEvent);

    }
}

accountDataComponent.html
<template>
    <c-search-account-component oninputcarryevent={displayData}>
    </c-search-account-component><br/><br/>
    <div if:true={isshow}>
        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <tr>
                <td><b>Name</b></td>
                <td><b>Site</b></td>
            </tr>
            <template for:each={records} for:item="acc">
                <tr key={acc.Id}>
                    <td>
                        {acc.Name}
                    </td>
                    <td>
                        {acc.Site}
                    </td>

                </tr>
            </template>
        </table>
    </div>
</template>
accountDataComponent.js
import { LightningElement,api } from 'lwc';
import displayAccounts from '@salesforce/apex/AccountDataController.displayAccounts';

export default class AccountDataComponent extends LightningElement {
    @api records;
    @api error;
    @api isshow;
    displayData(event){
        console.log('@@@@Entered into the method@@@');
        displayAccounts({
            searchekey:event.detail
        })
        .then(result=>{
            this.records=result;
            console.log('@@@records'+JSON.stringify(this.records));
            if(result.length!=0){
                this.isshow=true;
            }
            else{
                this.isshow=false;
            }
            this.error=undefined;

        })
        .catch(error=>{
            this.records=undefined;
            this.error=error;
        });
    }
}

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