Suppose I have 4 users, and I have already selected the first user before starting the search. When I search for the second user, the correct username appears in the search list, but its checkbox is already checked, even though I haven’t checked it.

<div class="flex justify-center items-center mt-2"
                        x-data="{ query: '', isFocused: false, firstFocus: false }">
                        <div class="bg-white border selectPeople p-2 rounded-lg">
                            <div x-show="!(isFocused && query.length > 1)">
                                <p class="text-sm text-gray-500 mt-2">Select all the people you would like in
                                    your organisation
                                    chart</p>
                            </div>
                            <div class="search-container flex items-center mt-2">
                                <img class="search-icon h-4 w-auto" src="{{ asset('images/MagnifyingGlass.svg') }}"
                                    alt="Search Icon">
                                <input wire:model.live.debounce.500ms="searchPeople" type="text" x-model="query"
                                    x-on:focus="isFocused = true; firstFocus = true;" x-on:blur="isFocused = false"
                                    class="w-full bordermainBlue outline-none block border py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 rounded-lg placeholder:text-gray-500 sm:text-md sm:leading-6"
                                    placeholder="Search">
                            </div>
                            <div class="searchBox flex justify-center flex-col items-center" x-show="!firstFocus">
                                <img class="" src="{{ asset('images/Illustration.png') }}" alt="Search Icon">
                                <p class="text-black text-base font-semibold">Start entering individuals’ names
                                </p>
                            </div>
                            <!-- User list with checkboxes -->
                            <ul class="mt-4 adddeduser space-y-6 border py-4"
                                x-show="(isFocused && query.length > 1) || firstFocus">
                                @foreach($users as $user)
                                    <li class="flex justify-between" key="{{ $user->id }}">
                                        <div class="flex items-center gap-2 pl-4">
                                            <div
                                                class="border rounded-full w-10 h-10 text-white flex justify-center items-center text-center bg-cyan-500">
                                                {{ strtoupper(substr($user->forename, 0, 1)) . strtoupper(substr($user->surname, 0, 1)) }}
                                            </div>
                                            <div class="space-y-1">
                                                <span
                                                    class="text-sm font-semibold block">{{ $user->forename . " " . $user->surname}}</span>
                                                <span
                                                    class="text-xs text-gray-500 block">{{ $user->role->title ?? ''}}</span>
                                            </div>
                                        </div>
                                        <input type="checkbox" wire:model="selectedUsers" value="{{ $user->id }}"
                                            class="form-checkbox h-4 w-4 mr-4 checkbx transition duration-150 ease-in-out">
                                    </li>
                                @endforeach
                            </ul>
                            <div class="flex justify-end mt-4">
                                <!-- Submit the form when the button is clicked -->
                                <button type="submit" class="p-2 rounded-lg">Continue</button>
                            </div>
                        </div>
                    </div>