Livewire 3 Dynamic component not rendering properly

Dynamic component renders <wire:id="........" /> instead of actual component html/blade content.

this is the blade livewire component

		<div class="row">
            @foreach($this->events as $event)
                <livewire:widgets.events.card  :$event :key="$event->id" />
            @endforeach
        </div>

         <div class="events-page__btn-box">
                <a href="#"
                    class="events-page__btn thm-btn"
                    wire:click.prevent="loadMore"
                >
                    Load More
                </a>
            </div>