Add/Delete dynamic row using Livewire with dependent dropdown

Hi, I'm using Livewire to build a Dependent cascading Dropdown with dynamic new row and delete row. I'm now able to add new row but I'm asking how I can get the Dropdown selected individual item list. When I select the first Dropdown it changes all the values the same as selected in livewire.

https://i.stack.imgur.com/lsRaQ.png

/project/resources/views/livewire/device-sale.blade.php

<div class="row">
  <div class="col-5">
    <label class="form-label mt-0">Select Brand</label>
    <select id="brand.0" class="form-control" name="brand[]" wire:model="brand.0" wire:change="updateItem">
      <option value="-1">Select Brand</option>
      @foreach ($brands as $brand)
        <option value="{{ $brand->id }}">{{ $brand->brand_name }}</option>
      @endforeach
    </select>
    @error('brand.0')
      <div class="text-danger text-sm">{{ $message }}</div>
    @enderror
  </div>
  <div class="col-5">
    <label class="form-label mt-0">Device Name</label>
    <div class="form-group mb-0">
      <select id="item.0" class="form-control" name="item[]" wire:model="item.0">
        <option value="-1">Select Device</option>
        @foreach ($items as $item)
          <option value="{{ $item->id }}">{{ $item->item_name }}</option>
        @endforeach
      </select>
      @error('item_name.0')
        <div class="text-danger text-sm">{{ $message }}</div>
      @enderror
    </div>
  </div>
  <div class="col-2">
    <button class="btn text-white btn-info btn-sm mt-4" wire:click.prevent="add({{ $i }})">Add</button>
  </div>


  @foreach ($inputs as $key => $value)
    <div class="add-input">
      <div class="row">
        <div class="col-5">
          <label class="form-label mt-0">Select Brand</label>
          <select id="brand.{{ $value }}" class="form-control" name="brand[]"
            wire:model="brand.{{ $value }}" wire:change="updateItem" 
            <option value="-1">Select Brand</option>
            @foreach ($brands as $brand)
              <option value="{{ $brand->id }}">{{ $brand->brand_name }}</option>
            @endforeach
          </select>
          @error('brand.{{ $value }}')
            <div class="text-danger text-sm">{{ $message }}</div>
          @enderror
        </div>
        <div class="col-5">
          <label class="form-label mt-0">Device Name</label>
          <div class="form-group mb-0">
            <select class="form-control" name="item[]" wire:model="item.{{ $value }}">
              <option value="-1">Select Device</option>
              @foreach ($items as $item)
                <option value="{{ $item->id }}">{{ $item->item_name }}</option>
              @endforeach
            </select>
            @error('item_name.0')
              <div class="text-danger text-sm">{{ $message }}</div>
            @enderror
          </div>
        </div>
        <div class="col-2">
          <button class="btn btn-danger btn-sm mt-4" wire:click.prevent="remove({{ $key }})">Remove</button>
        </div>
      </div>
    </div>
  @endforeach
</div>

/project/app/Http/Livewire/DeviceSale.php

<?php

namespace App\Http\Livewire;

use App\Models\Item;
use App\Models\Brand;
use Livewire\Component;

class DeviceSale extends Component
{
    public $brands = [];
    public $items = [];
    public $brand;
    public $item;

    public $inputs = [];
    public $i = 1;

 
    public function render()
    {
        $this->brands = Brand::orderBy('brand_name', 'asc')->get();
        return view('livewire.device-sale');
    }

    public function add($i)
    {
        $i = $i + 1;
        $this->i = $i;
        array_push($this->inputs ,$i);
    }
    public function remove($i)
    {
        unset($this->inputs[$i]);
    }

    public function updateItem()
    {
        $this->items = Item::where('brand_id', $this->brand)
            ->orderBy('item_name', 'asc')->get();
    }

}