Why Livewire component not working inside <td> of table?

I have users table and inside table rows, I use edit-user component to load a modal.

when I use this edit-user component inside <td> tags, wire:key is messed up and edit-user component is not loading in every row and functionality of pagination and search broke.

but when using it out of <td> tags even <tr>, it works without problem.

Table Rows: (edit section)

@foreach($users as $user)
<tr class="border hover:bg-gray-100/40 text-sm" wire:key="{{$user->id}}">
    <td class="py-4 px-1 text-center">
            <input wire:model.live="selectedUserIds" value="{{$user->id}}" type="checkbox" class="rounded p-2 shadow">
    </td>
    
    <td class="whitespace-nowarp px-2 text-sm">
        <div class="flex items-center justify-end" x-data="{edit_modal: false }">
            <x-menu>
                <x-menu.button class="hover:bg-gray-200 hover:rounded">
                    <x-icon.ellipsis-horizontal :size="7"/>
                </x-menu.button>

                <x-menu.items>

                    @if($user->id !== session('user_id'))
                    <x-menu.item wire:click="activate({{$user->id}})">
                        {{$user->is_active === 1 ? 'غیرفعال‌سازی' : 'فعال‌سازی'}}
                    </x-menu.item>
                    @endif


                    <!-- edit -->
                    <livewire:tables.authentication.users.edit-user  :key="'row-'.$user->id" :$user/>
                    


                    <x-menu.item x-on:click=" edit_modal= true ">
                        لاگ
                    </x-menu.item>

                </x-menu.items>
            </x-menu>
        </div>

    </td>
</tr>

@endforeach