Can not set value to x-select inside livewire component Manually

[Uhasith]

I have two select fields. One is office other one is consumer. when i change office => according to that value i want to set consumer. i want to set first consumer that belongs to the selected office automatically when user changes the office selection. In below posted way value is set successfully but the Select Field UI is not updated of Consumer select field. it's showing a blank field. When user select office consumer Endpoint => i'm getting selected value as 'Null'.

[2023-09-28 09:17:11] local.INFO: array (
  'selected' => NULL,
  'office_id' => 7,
) ```

public function setConsumer($id){

    $office = Office::find($id);
    $consumer = $office->consumer->first();
    
    if(empty($consumer)){
        $this->consumer_id = null;
        return;
     }
     
    $this->consumer_id  =  $consumer->id;
}

:async-data="[
    'api' => route('consumers.search'),
    'method' => 'POST',
    'params' => ['selected' => $consumer_id, 'office_id' => $office_id],
    'alwaysFetch' => false,
]"```

[Uhasith]

x-on:selected of office i'm calling setConsumer function. when user select a office. inside that i'm setting up new value to $this->consumer_id. But route('consumers.search') -> this endpoint getting Null value as 'selected'. I tried Hard coding a value to selected value but UI not updating. 🙇🏻