Checkboxes have the checked attribute but aren't visually checked.

I am creating a popup for editing roles and permissions. When I click on edit role, I trigger a function on the controller and pass the role id. In the controller I update the public variables for use in the blade file which populates the selected role and a list of all available permissions including permissions already associated with the role. In the blade template you can select which permissions you want via checkboxes. The checkboxes with the "checked" attribute don't render as checked unless you click them. Is there any way get them to display as checked?

public $roleEdit;
public $roleEditId;
 public $roleEditName;
public $roleEditPermissionsSelected = [];

public function PopulateEditRole($id){
        $this->roleEdit = Role::findOrFail($id);
        $newRoleEdit = Role::findOrFail($id);
        $this->roleEditId = $id;
        $this->roleEditName = $this->roleEdit->name;
        $this->roleEditPermissionsSelected = json_decode($newRoleEdit->permissions->pluck('name'));
        $this->dispatchBrowserEvent('role2-edit');
    }

<div class="wrapper" x-data="{
    roleEditNameInput: @entangle('roleEditName'),
    roleEditIdInput: @entangle('roleEditId'),
    }"
	@role2-edit-close.window="showRoleEdit = false"
>
            <form wire:submit.prevent="EditRole">

                @foreach ($permissions as $permission)
                    <div class="flex items-center">

                        <input type="checkbox" class="mr-2" id="edit-{{$permission->name}}"
                        wire:model="roleEditPermissionsSelected.{{$permission->name}}"
                        {{in_array($permission->name, $roleEditPermissionsSelected) ? 'checked' : ''}}>

                        <label for="edit-{{$permission->name}}">{{$permission->name}}</label>
                    </div>
                @endforeach

            </form>
</div>