title: Call to a member function first() on array Laravel Livewire
body: <p>I'm trying to make a multi-svg selection system with <code>Laravel 7</code> and <code>Livewire</code>.</p>
  <p>When clicking on a SVG shape (acting like a button), I get a <code>Call to a member function first() on array</code> error, with not much in the debug panel as it's highlighting a closing div (almost end of file). By the way, there is no explicit `first()' call in my code.</p>
  <p>Here is my front-end component code</p>
  <pre><code>@if(count($sectors) &gt; 0)
      &lt;div class=&quot;svg-container&quot;&gt;
        &lt;svg preserveAspectRatio=&quot;xMidYMin slice&quot; viewbox=&quot;0 0 800 525&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; &gt;
                @foreach($sectors as $sector)
                    &lt;polygon wire:key=&quot;sector{{$sector-&gt;id}}&quot; wire:click=&quot;selectSector({{ $sector-&gt;id }})&quot; class=&quot;hover:cursor-pointer&quot; points=&quot;{{$sector-&gt;points}}&quot; fill=&quot;@if(in_array($sector-&gt;id, $selected_sectors)) {{$sector-&gt;hover_color}} @else {{$sector-&gt;color}} @endif&quot; opacity=&quot;0.5&quot; onMouseOver=&quot;this.style.fill='@if(in_array($sector-&gt;id, $selected_sectors)) {{$sector-&gt;color}} @else {{$sector-&gt;hover_color}} @endif'&quot; onMouseOut=&quot;this.style.fill='@if(in_array($sector-&gt;id, $selected_sectors)) {{$sector-&gt;hover_color}} @else {{$sector-&gt;color}} @endif'&quot;/&gt;
                @endforeach
          @foreach($empties as $empty)
                    &lt;polygon wire:key=&quot;empty{{$sector-&gt;id}}&quot; points=&quot;{{$empty-&gt;points}}&quot; fill=&quot;{{ $empty-&gt;empty_color ?? 'white' }}&quot; opacity=&quot;0.5&quot;/&gt;
                @endforeach
            &lt;/svg&gt;
      &lt;/div&gt;
      @endif
  </code></pre>
  <p>and here is the back-end</p>
  <pre><code>public function mount($event){
          $this-&gt;event = $event;
          $this-&gt;filter = &quot;no&quot;;
  
          $this-&gt;all_tickets = TicketsModel::where('event_id', $this-&gt;event)
              -&gt;where('isAvailableToPurchase', 1)
              -&gt;where('isBought', 0)
              -&gt;where('locked', 0)
              -&gt;get();
          
          $tickets_qty_groups = $this-&gt;all_tickets-&gt;groupBy('group_id');
          $this-&gt;groups = collect($tickets_qty_groups);
          
  }
  
  public function render(){
          $this-&gt;sectors = collect([]);
          $this-&gt;empties = collect([]);
          
          $test = EventsModel::find($this-&gt;event);
          $this-&gt;event_name = $test-&gt;title;
          $this-&gt;event_date = $test-&gt;start;
          
          $seatmap = $test-&gt;seat_map;
          $map = new SeatMapModel;
          $this-&gt;seatmap_image = $map-&gt;getImage($seatmap);
          $m = new SectorsModel;
          $sectors = SectorsModel::where('seat_map_id', $seatmap)-&gt;get();
          
          foreach($sectors as $sector){
              if($this-&gt;all_tickets-&gt;contains('sector_id', $sector-&gt;id)){
                  $this-&gt;sectors = $this-&gt;sectors-&gt;push($sector);
              }else{
                  $this-&gt;empties = $this-&gt;empties-&gt;push($sector);
              }
          }
          return view('livewire.components.seat-map-viewer');
  }
  
  public function selectSector($sector_id){
          $this-&gt;sector_clicked = $sector_id;
          $this-&gt;selected_sectors[] = $sector_id;
          $this-&gt;selected_sectors = array_unique($this-&gt;selected_sectors);
      }
  </code></pre>
  <p>Thanks.</p>
  <p>Update 1:</p>
  <p>Stack Trace:</p>
  <pre><code>  @if(count($sectors) &gt; 0)
      &lt;div class=&quot;svg-container&quot;&gt;
        &lt;svg preserveAspectRatio=&quot;xMidYMin slice&quot; viewbox=&quot;0 0 800 525&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; &gt;
                @foreach($sectors as $sector)
                    &lt;polygon wire:key=&quot;sector{{$sector-&gt;id}}&quot; wire:click=&quot;selectSector({{ $sector-&gt;id }})&quot; class=&quot;hover:cursor-pointer&quot; points=&quot;{{$sector-&gt;points}}&quot; fill=&quot;@if(in_array($sector-&gt;id, $selected_sectors)) {{$sector-&gt;hover_color}} @else {{$sector-&gt;color
                @endforeach
          @foreach($empties as $empty)
                    &lt;polygon wire:key=&quot;empty{{$sector-&gt;id}}&quot; points=&quot;{{$empty-&gt;points}}&quot; fill=&quot;{{ $empty-&gt;empty_color ?? 'white' }}&quot; opacity=&quot;0.5&quot;/&gt;
                @endforeach
            &lt;/svg&gt;
      &lt;/div&gt;
      @endif
      &lt;/div&gt;
    &lt;div&gt;
      &lt;select class=&quot;select input-group&quot; name=&quot;filter&quot; wire:model=&quot;filter&quot;&gt;
        &lt;option value=&quot;no&quot;&gt;{{__('No filter')}}&lt;/option&gt;
        &lt;option value=&quot;price&quot;&gt;{{__('Order by price')}}&lt;/option&gt;
        &lt;option value=&quot;rating&quot;&gt;{{__('Order by reseller rating')}}&lt;/option&gt;
        &lt;option value=&quot;2&quot;&gt;{{__('2 tickets or more')}}&lt;/option&gt;
        &lt;option value=&quot;3&quot;&gt;{{__('3 tickets or more')}}&lt;/option&gt;
        &lt;option value=&quot;4&quot;&gt;{{__('4 tickets or more')}}&lt;/option&gt;
      &lt;/select&gt;
      &lt;div class=&quot;flex overflow-x-scroll pb-10 hide-scroll-bar&quot;&gt;
        &lt;div class=&quot;flex flex-nowrap lg:ml-40 md:ml-20 ml-10 &quot;&gt;
          @foreach($groups as $group)
            &lt;livewire:components.ticket-card :max=&quot;count($group)&quot; :ticket_id=&quot;$group-&gt;first()-&gt;id&quot; :event_name=&quot;$event_name&quot; :event_date=&quot;$event_date&quot; :wire:key=&quot;$group-&gt;first()-&gt;id&quot; &gt;
          @endforeach
        &lt;/div&gt;
      *&lt;/div&gt;*
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I put * so we can see which line is highlighted.</p>