How do I uncheck checkbox in Laravel livewire for the changes to reflect in the database?

Please I need assistance solving this problem, I am using laravel Spatie roles and permission, I want to add permissions to the role using checkboxes, so far adding permission to roles is working fine, but when editing roles if I unchecked permission for a role it doesn't reflect the changes in the database,any help will be appreciated

This is view

  <!-- Modal -->
 <div class="modal " id="roleModal" tabindex="-1" aria-labelledby="roleModalLabel" aria- 
   hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="roleModalLabel">Role</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form method="POST">
                    @csrf

    <div class="col-span-6 sm:col-span-4">
        <x-jet-label for="role" value="" />
        <x-jet-input id="role" type="text" class="mt-1 block w-full" 
    wire:model.defer="roleName" />
        <x-jet-input-error for="role" class="mt-2" />
    </div>

      <div class="block">
        <strong>Permission:</strong>
        <br/>
        @foreach($permissions as $key => $permission)
         <x-jet-label value="" />
         
        <x-jet-checkbox  id="permission" value=""  
         type="checkbox" class="mt-1 block " wire:model.defer="permissionId"   />
        <br/>
        @endforeach
   </div>
    --}}
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="bg-red-500 text-white active:bg-indigo-600 px-3 py-2 
   rounded outline-none focus:outline-none" wire:click="closeModal">Close</button>

    @if ($editMode)
        <button type="button" class="bg-indigo-500 text-white active:bg-indigo-600 px-3 
     py-2 rounded outline-none focus:outline-none" wire:click="updateRole">Save 
    changes</button>
    @else

    <button  type="button" class="btn btn-primary" wire:click="storeRole">Create 
   Role</button>
  @endif
  </div>
</div>

This is the role livewire component

class Roles extends Component
{

    public $editMode = false;
    public $roleId;
    public $roleName;
    public $permissionId = [];


    public function showEditModal($id)
    {
        $this->reset();

        $this->editMode  = true;

        $this->roleId = $id;

       
        $this->loadRole();

        $this->dispatchBrowserEvent('modal', ['modalId' => '#roleModal', 'actionModal' => 'show']);
        
    }

    public function loadRole()
    {
        $role = Role::find($this->roleId);

        $this->roleName = $role->name;
        $this->permissionId = $role->permissions->pluck('id');

    }


    public function updateRole()
    {
       
        $role = Role::find($this->roleId);

        $role->update(['name'  => $this->roleName ]);

        $role->syncPermissions($this->permissionId);
        
        
       
        $this->reset();
        
        $this->dispatchBrowserEvent('modal', ['modalId' => '#roleModal', 'actionModal' => 'hide' ]);
        
        session()->flash('message', 'Role Updated Successfully');
    }

    public function deleteRole($id)
    {
        $role = Role::find($id);

        $role->delete();

        session()->flash('message', 'Role Deleted Successfully');
    }


    public function closeModal()
    {
        $this->reset();
        $this->dispatchBrowserEvent('modal', ['modalId' => '#roleModal', 'actionModal' => 'hide' ]);
    }
    
    public function render()
    {
        $roles = Role::orderBy('id','DESC')->paginate(5);

        $permissions = Permission::get();

        
      

        return view('livewire.roles', ['roles' => $roles, 'permissions' => $permissions ]);
    }
}