Livewire - I only can Add records to the pivot table - Through checkboxes

I am only able to add records to the pivot table. Really strugling on removing an entry from the pivot table

Livewire Component

<?php

namespace App\Http\Livewire;

use App\Models\User;
use App\Models\Company;
use Livewire\Component;
use Livewire\WithPagination;

class UserAssignCompanySection extends Component
{
    use WithPagination;

    public $sortBy = 'id';
    public $sortAsc = false;
    public $user;
    public $companies;
    public $search;
    public $confirmingCompanyRemoval = false;
    public $userCompanies = [];

    protected $rules = [
        'user.name' => 'required',
        'user.email' => 'required',
        'user.title' => 'required',
        'user.first_name' => 'required',
        'user.last_name' => 'nullable',
        'user.mobile' => 'nullable',
        'user.phone' => 'nullable',
        'user.is_customer' => 'boolean',
        'user.is_provider' => 'boolean',
        'userCompanies' => 'required|array',
    ];

    // Table Sort
    public function sortBy($field)
    {
        if($field == $this->sortBy){
            $this->sortAsc = !$this->sortAsc;
        }
         $this->sortBy = $field;
    }


    // public function updatedUserCompanies()
    // {

    //     $var1 = array_diff(Company::pluck('id')->toArray(),$this->userCompanies);

    //     dd(Company::pluck('id')->toArray(), $this->userCompanies);
    //     dd($var1);
    //     $this->user->companies()->sync($this->userCompanies);
    // }

    public function updatedUserCompanies()
    {
        //dd($this->userCompanies);
        $this->user->companies()->sync($this->userCompanies);

    }

    public function mount(User $user)
    {
        $this->user = $user;
        $this->companies = Company::all();
        $this->userCompanies = $user->companies()->pluck('company_id')->toArray();
        //dd($this->userCompanies);
    }

    public function render()
    {
        //$this->user->companies()->sync($this->userCompanies);
        return view('livewire.user-assign-company-section');
    }
}

<div>
    <div class="grid grid-cols-1 text-left xl:grid-cols-6">
        <div class="col-span-3 p-4">
            <p class="text-lg underline">Name</p>
            <x-jet-input wire:model.defer="user.name" id="name" type="text" disabled class="block w-full mt-1 bg-gray-100" />
            <x-jet-input-error for="user.name" class="mt-2" />
            <br>

            @json($userCompanies);


            {{-- @foreach ($userCompanies as $item)
                {{ $item }}
            @endforeach --}}

            @foreach($companies as $company)
            <div class="mt-1">
                <input wire:model="userCompanies" type="checkbox" value="{{ $company->id }}">
                    {{ $company->name }} <br>
            </div>
            @endforeach
            <br>
            {{-- <a href="{{ url()->previous() }}"><x-jet-button>Back</x-jet-button></a> --}}
            <br>
        </div>
    </div>
</div>

When i click on the checbox with company_id = 3 a sting gets added to $this->userCompanies livewire property

something like this

[1,2,"3"];

When i uncheck ids such as 1 and 2 (which was retreived through the DB won't get deleted)

I think it tries to delete a string such as "1" from an array based on integers