I am using Laravel 11 and Livewire 3. I am using Livewire for modal open/close and submit form insidie modal. Opğen, close and submit is working. I am using JQuery Datatable for showing datas, Datatable take value from api. When I open model and enter value to form datatable lost datas. How can I fix this problem.

This is my blade page:

    <div class="col-12">
        <div class="card">
            <div class="card-header">
                @livewire('admin.add-skill-modal')
            </div>
            <div class="card-body">
                <table id="example" class="nowrap m-0 p-0">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Yetenek Adı</th>
                            <th>Yetenek Oranı</th>
                            <th>Renk</th>
                            <th>İşlemler</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            const table = $('#example').DataTable({
                responsive: true,
                language: {
                    "url": ".10.24/i18n/Turkish.json"
                },
                ajax: {
                    url: "{{ route('skillsTable') }}",
                    type: "GET",
                    dataSrc: ""
                },
                columns:[
                    {data:"id"},
                    {data:"name"},
                    {data:"rate"},
                    {
                        data:"color",
                        render: function(data) {
                            if (data == 1) {
                                return `<input type="color" value="#ff6464" disabled>`;
                            } else if (data == 2) {
                                return `<input type="color" value="#9272d4" disabled>`;
                            } else if (data == 3) {
                                return `<input type="color" value="#5185d4" disabled>`;
                            } else if (data == 4) {
                                return `<input type="color" value="#ca56f2" disabled>`;
                            } else {
                                return `HATA`;
                            }
                        }
                    },
                    {data:"id"},
                ],
                order: [
                    [0, "desc"]
                ],
                columnDefs: [{
                        targets: "_all",
                        className: "dt-center"
                    }
                ],
                initComplete: function() {
                    this.api()
                        .columns([0, 1])
                        .every(function() {
                            var that = this;

                            $('input', this.footer()).on('keyup change clear', function() {
                                if (that.search() !== this.value) {
                                    that.search(this.value).draw();
                                }
                            });
                        });
                }
            });
        });
    </script>

And this is my livewire component:

<div>
    {{-- Knowing others is intelligence; knowing yourself is true wisdom. --}}
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">Yeni Yetenek Ekle</button>

    {{-- Add Modal --}}
                    <form wire:submit="addSkill" enctype="multipart/form-data">
                        @csrf
                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="name">Yetenek Adı</label>
                                <input type="text" class="form-control" id="name" name="name" wire:model="name">
                            </div>
                            <div class="form-group col-md-12">
                                <label for="engName">Yetenek Adı (İngilizce)</label>
                                <input type="text" class="form-control" id="engName" name="engName" wire:model="engName">
                            </div>
                            <div class="form-group col-md-12">
                                <label for="rate">Yetenek Oranı</label>
                                <input type="number" class="form-control" id="rate" name="rate" min="0" max="100" wire:model="rate">
                            </div>
                            <div class="form-group col-md-12">
                                <label for="rate">Renk</label>
                                <div class="col-sm-10">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gridRadios" value="1" wire:model="color">
                                        <label class="form-check-label">
                                            Açık kırmızı / Mercan kırmızısı
                                            <input type="color" value="#ff6464" disabled>
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gridRadios" value="2" wire:model="color">
                                        <label class="form-check-label">
                                            Açık mor / Leylak
                                            <input type="color" value="#9272d4" disabled>
                                        </label>
                                    </div>
                                    <div class="form-check disabled">
                                        <input class="form-check-input" type="radio" name="gridRadios" value="3" wire:model="color">
                                        <label class="form-check-label">
                                            Orta ton mavi
                                            <input type="color" value="#5185d4" disabled>
                                        </label>
                                    </div>
                                    <div class="form-check disabled">
                                        <input class="form-check-input" type="radio" name="gridRadios" value="4" wire:model="color">
                                        <label class="form-check-label">
                                            Canlı mor / Magenta-mor
                                            <input type="color" value="#ca56f2" disabled>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <button type="submit" class="btn btn-primary pull-right">Kaydet</button>
                            </div>
                        </div>
                    </form>
                
    {{-- End Add Modal --}}

</div>

Livewire controller:

<?php

namespace App\Livewire\Admin;

use App\Models\SkillsModel;
use Livewire\Component;

class AddSkillModal extends Component
{
    public $showModal = false;
    public $name, $engName, $rate, $color;

    public function rules(){
        return [
            //Rules
        ];
    }

    public function messages(){
        return [
            // Messages
        ];
    }

    public function openModal()
    {
        session()->flash('message', ['info', ['Yetenek açıldı.', 'Bilgi!']]);
        $this->showModal = true;
        $this->dispatch('show-modal'); // JavaScript event'i tetikle
    }

    public function closeModal()
    {
        $this->showModal = false;
        $this->dispatch('hide-modal'); // JavaScript event'i tetikle
    }

    public function render()
    {
        return view('livewire.admin.add-skill-modal');
    }

    public function addSkill()
    {
        // Check validation
        $this->validate();

        // Add skill
        $skill = new SkillsModel();
        $skill->name = $this->name;
        $skill->engName = $this->engName;
        $skill->rate = $this->rate;
        $skill->color = $this->color;
        $saveStatus = $skill->save();

        // Check save status
        if(!$saveStatus){
            session()->flash('message', ['error', ['Yetenek eklenirken bir hata oluştu.', 'Hata!']]);
            $this->closeModal();
            return;
        }

        session()->flash('message', ['success', ['Yetenek başarıyla eklendi.', 'Başarılı!']]);
        $this->closeModal();
        return;
    }
}