Statamic Antlers - Livewire Component stops rendering once I update property in URL parameter

Question

class PracticeLocatorRegions extends Component
{
    public string $selectedRegion = '';

    protected $queryString = ['selectedRegion' => ['except' => '']];

    public function mount()
    {
        $this->selectedRegion = request('selectedRegion') ?? '';
    }

    public function render(): View
    {
        $practices = Entry::whereCollection('practices');

        return view('livewire.practice-locator-regions', [
            'regions'   => $this->getRegions(),
            'practices' => $this->selectedRegion ? $practices->where('region', $this->selectedRegion) : $practices,
        ]);
    }

    public function getRegions(): array
    {
        $practices = Entry::whereCollection('practices');

        $practicesByRegion = array();

        foreach ($practices as $key => $practice) {
           $practicesByRegion[$practice['region']][$key] = $practice;
        }

        ksort($practicesByRegion);
        return array_keys($practicesByRegion);
    }

    public function selectRegion(string $region): void
    {
        $this->selectedRegion = $region;
    }
}

This is my component. I am trying to display a list of category buttons, when you click one the practices list below show filter. I want the parameter to be in the url so users can copy and past it to share

Currently when I click the button the Component stops rendering completely. If I refresh the whole page then it loads correctly. I want this to be dynamic in page

Template:

<!-- Begin pratice-locator-regions.antlers.html -->
<div class="container">
    <div class="flex flex-wrap justify-center">
        {{ regions }}
            <div class="p-4">
                <button wire:click="selectRegion('{{ value }}')" class="button m-4">{{ value }}</button></div>
        {{ /regions }}
    </div>
    <div>
        <ul>
        {{ practices }}
            <li>{{ title }}</li>
        {{/practices}}
        <ul>
    </div>
</div>
<!-- end pratice-locator-regions.antlers.html -->

I have tried using both

wire:click="$set('selectedRegion', '{{ value }}')" and wire:click="selectRegion('{{ value }}')"

but neither seem to work. Is this an antlers nuance?

Answer 1

These lines around the template were causing the issue:

<!-- Begin pratice-locator-regions.antlers.html -->

<!-- end pratice-locator-regions.antlers.html -->