Livewire 3 get sub categories when categories selected

Hello everyone, I am using Laravel 11 and Livewire 3. I am trying to take sub categories when categories selected. How ever subcategories are not come and I can't find the problem. My Livewire blade:

<div>
    {{-- Knowing others is intelligence; knowing yourself is true wisdom. --}}

    <label for="category">Kategori Seç</label>
    <select wire:model="selectedCategory" id="category">
        <option value="">Seçiniz</option>
        @foreach ($this->categories as $category)
            <option value="{{ $category->id }}">{{ $category->name }}</option>
        @endforeach
    </select>

    <div>
        <label>Alt Kategoriler:</label>
        <ul>
            @foreach ($this->subcategories as $subcategory)
                <li>{{ $subcategory->name }}</li>
            @endforeach
        </ul>
    </div>

    <script>
        $(document).ready(function() {
        // Take selected category id and write to the console
        window.addEventListener('selectedCategory', event => {
            console.log(event.detail);
        });

        window.addEventListener('no-subcategories', event => {
            console.log('Alt kategori yok');
        });
    });
    </script>
</div>

My Livewire controller:

<?php

namespace App\Livewire\Admin\Menu;

use App\Models\Categories;
use App\Models\SubCategories as ModelsSubCategories;
use Livewire\Component;

class SubCategories extends Component
{
    public $categories;
    public $subcategories = [];
    public $selectedCategory = null;

    public function mount()
    {
        $this->categories = Categories::where('is_active', 1)->get();
    }

    public function updatedSelectedCategory($categoryId)
    {
        $this->subcategories = Categories::find($categoryId)?->subcategories ?? [];

        if (empty($this->subcategories)) {
            $this->dispatchBrowserEvent('no-subcategories');
        }
    }

    public function render()
    {
        return view('livewire.admin.menu.sub-categories');
    }
}