Help : Added livewire 3 to existing project, form data binding

Adding livewire 3 to existing project, after installing livewire, created component, copy pasted existing form to livewire view file, updated livewire component.

These are not full page component. Observation, values are passed with class=select, but does not work with select2.

text input field is binding but select input fields such as datepicker, select & multi-select is not binding to livewire.

Need help with binding drop-down select/multi-select, datepicker and checkbox fields and values.

Form

 <div class="card-body">
        <form method="POST"  wire:submit.prevent="save" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label class="required" for="code">{{ trans('cruds.formData.fields.code') }}</label>
                <input class="form-control {{ $errors->has('code') ? 'is-invalid' : '' }}" type="text" name="code" id="code" wire:model="code" required>
                @if($errors->has('code'))
                    <div class="invalid-feedback">
                        {{ $errors->first('code') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.formData.fields.code_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="date_time">{{ trans('cruds.formData.fields.date_time') }}</label>
                <input class="form-control datetime {{ $errors->has('date_time') ? 'is-invalid' : '' }}" type="text" name="date_time" id="date_time" wire:model="date_time" >
                @if($errors->has('date_time'))
                    <div class="invalid-feedback">
                        {{ $errors->first('date_time') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.formData.fields.date_time_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="location_id">{{ trans('cruds.formData.fields.location') }}</label>
                <select class="form-control select2 {{ $errors->has('location') ? 'is-invalid' : '' }}" name="location_id" id="location_id" wire:model="selLocation">
                    @foreach($locations as $id => $entry)
                        <option value="{{ $id }}" {{ old('location_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                    @endforeach
                </select>
                @if($errors->has('location'))
                    <div class="invalid-feedback">
                        {{ $errors->first('location') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.formData.fields.location_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="categories">{{ trans('cruds.formData.fields.category') }}</label>
                <div style="padding-bottom: 4px">
                    <span class="btn btn-info btn-xs select-all" style="border-radius: 0">{{ trans('global.select_all') }}</span>
                    <span class="btn btn-info btn-xs deselect-all" style="border-radius: 0">{{ trans('global.deselect_all') }}</span>
                </div>
                <select class="form-control select2 {{ $errors->has('categories') ? 'is-invalid' : '' }}" name="categories[]" id="categories" wire:model="selCategories" multiple>
                    @foreach($categories as $id => $category)
                        <option value="{{ $id }}" {{ in_array($id, old('categories', [])) ? 'selected' : '' }}>{{ $category }}</option>
                    @endforeach
                </select>
                @if($errors->has('categories'))
                    <div class="invalid-feedback">
                        {{ $errors->first('categories') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.formData.fields.category_helper') }}</span>
            </div>
            <div class="form-group">
                <label>{{ trans('cruds.formData.fields.ec_select') }}</label>
                @foreach(App\Models\FormData::EC_SELECT_RADIO as $key => $label)
                    <div class="form-check {{ $errors->has('ec_select') ? 'is-invalid' : '' }}">
                        <input class="form-check-input" type="radio" id="ec_select_{{ $key }}" name="ec_select" value="{{ $key }}" {{ old('ec_select', '1') === (string) $key ? 'checked' : '' }}>
                        <label class="form-check-label" for="ec_select_{{ $key }}">{{ $label }}</label>
                    </div>
                @endforeach
                @if($errors->has('ec_select'))
                    <div class="invalid-feedback">
                        {{ $errors->first('ec_select') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.formData.fields.ec_select_helper') }}</span>
            </div>
            <div class="form-group">
                <div class="form-check {{ $errors->has('is_active') ? 'is-invalid' : '' }}">
                    <input type="hidden" name="is_active" value="0">
                    <input class="form-check-input" type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', 0) == 1 ? 'checked' : '' }}>
                    <label class="form-check-label" for="is_active">{{ trans('cruds.formData.fields.is_active') }}</label>
                </div>
                @if($errors->has('is_active'))
                    <div class="invalid-feedback">
                        {{ $errors->first('is_active') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.formData.fields.is_active_helper') }}</span>
            </div>
            <div class="form-group">
                <button class="btn btn-danger" type="submit">
                    {{ trans('global.save') }}
                </button>
            </div>
        </form>
    </div>

livewire component

class CreateForm extends Component
{
    public $code;
    public $date_time;    
    public $selLocation = null;

    public array $locations = [];
    public array $categories = [];
    public array $selCategories = [];

    public function mount()
    {
        $this->locations = LocationName::pluck('location_name', 'id')->prepend(trans('global.pleaseSelect'), '')->toArray();
        $this->categories = Category::pluck('category_name', 'id')->toArray();
         
    }

    public function updatedSelLocation()
    {
        dd($this);
    }

    public function save()
    {
        dd($this);
    }

    public function render()
    {
        return view('livewire.form-datas.create-form');
    }
}

dd output

 #__name: "form-datas.create-form"
  #listeners: []
  #attributes: 
Livewire\Features\SupportAttributes\
AttributeCollection
 {#1657 ▶}
  #withValidatorCallback: null
  #rulesFromOutside: []
  #messagesFromOutside: []
  #validationAttributesFromOutside: []
  +code: "0002"
  +date_time: null
  +selLocation: null
  +isActive: true
  +locations: array:3 [▶]
  +categories: array:5 [▶]
  +selCategories: []
}

Thank You