Data not preserved after one field is updated

#1

What seems to be the problem: I wanted to create multiple filter with modeled property fields but as soon as on field is changed the other fields data will get lost. I am trying to filter schools using their name and category(dropdown least basically a select2) but as soon as I started typing school name the data on category field get lost. I am loading the category from database on mount() function.

Are you using the latest version of Livewire: I am using laravel 8.x and livewire 2

Do you have any screenshots or code examples: Here are both the Form.php files and form.blade.php file codes.

<?php

namespace App\Http\Livewire\Setting;

use App\Models\School;
use Livewire\Component;

class Form extends Component
{
    public $schoolName;
    public $schoolCategories;
    public $category;

    public function mount()
    {
        $this->schoolCategories = School::select('category')->get();
    }

    public function resetFilter() {
        $this->reset(['schoolName', 'category']);
    }

    public function render()
    {
        return view('livewire.school.form', [
            'schoolData' => School::where([
                ['name', 'like', '%' . $this->schoolName . '%'],
                ['category', 'like', '%' . $this->category . '%'],
            ])
        ]);
    }
}

<div class="row align-items-end">
    <div class="col-md-5">
        <div class="form-group">
            <label for="schoolName">School Name</label>
            <input text class="form-control" name="name" id="schoolName" wire:model="schoolName" />
        </div>
    </div>
    <div class="col-md-5">
        <div class="form-group">
            <label for="category">School Category</label>
            <select class="form-control" name="category" id="category" wire:model="category" style="width: 100%;">
                <option>Select Category</option>
                @foreach ($schoolCategories as $schoolCategory)
                    <option value="{{ $schoolCategory->category }}">{{ $schoolCategory->category }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <button class="btn btn-primary form-control" wire:click="resetFilter()">Reset Filter</button>
        </div>
    </div>
</div>

Please help me am stuck on this place. If you select a category first and trying to type school name at the field, it will discard both category and schoolCategories data. The same way reverse.

Thank you for your help.