Trouble adding CKEditor5 from a js file on my Laravel Livewire Project

I have a ckeditor5.js file in my project under resources/js

with its configurations to a const variable named editorConfig. and this at the bottom of the file

if( document.querySelector( '#ckeditor5' ) ) {
    ClassicEditor
    .create( document.querySelector( '#ckeditor5' ), editorConfig )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    })
}

what i am trying to do is add it to a reusable blade component

@props([
    'id' => 'ckeditor5',
])

<div wire:ignore>
    <textarea
        id="{{ $id }}"
        class=" {{ $attributes->whereStartsWith('wire:') }} "
    >
    </textarea>
</div>

@push('scripts')
    <script>
        document.addEventListener("livewire:load", function () {
            ClassicEditor
                .create(document.querySelector('#{{ $id }}'))
                .then(editor => {
                    editor.model.document.on('change:data', () => {
                        @this.set('{{ $attributes->get('wire:model') }}', editor.getData());
                    });
                })
                .catch(error => {
                    console.error('Error initializing CKEditor:', error);
                });
        });
    </script>
@endpush

and i have this so far

in a modal i am trying to add use it as

<x-admin.input.markdown-editor
		wire:model.live="myFieldName"
/>

but it is not showing in the modal.