My LiveWIre wire Click Action is not working

This is my Livewire Component. When I try to click a function like delete it doesn't work and doesn't give me dd(). Everything is ok I've checked several times and tried everything.

@extends('admin.layouts.layout')
@section('content')

<!-- Modal -->
<div>
  <div
    class="modal fade"
    id="deleteModal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Catagory Delete</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <form wire:submit.prevent="destroyCatagory">
          <div class="modal-body">
            <h6>Are You Sure YOu Want To Delete this Data?</h6>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
            <button type="submit" class="btn btn-primary">Yes Delete</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="row">
    @if (session()->has('message'))
    <div class="alert alert-success">{{session('message')}}</div>

    @endif
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h4>
            Catagory
            <a
              href="{{url('admin/catagory/create')}}"
              class="float-end btn btn-primary"
              >Add Catagory</a
            >
          </h4>
        </div>
        <div class="card-body">
          <table class="table table-striped table-hover">
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Status</th>
              <th>Action</th>
            </tr>
            @forelse ($catagories as $catagory)
            <tr>
              <td>{{$catagory->id}}</td>
              <td>{{$catagory->name}}</td>
              <td>{{$catagory->status=='1'? 'Hidden':'visible'}}</td>
              <td>
                <a
                  href="{{url('admin/catagory/'.$catagory->id.'/edit')}}"
                  class="btn btn-success"
                >
                  Edit</a
                >
                <a
                  wire:click="deleteCatagory({{$catagory->id}})"
                  class="btn btn-primary"
                  data-bs-toggle="modal"
                  data-bs-target="#deleteModal"
                  >Delete</a
                >
              </td>
            </tr>
            @empty @endforelse ($catagories as $catagory)
          </table>
          {{$catagories->links()}}
        </div>
        <div class="card-footer"></div>
      </div>
    </div>
  </div>
</div>

@endsection

This is my index.blade.php for the livewire component. Everything seems to be ok in this component. I've checked everything several times and I've been stuck on this for many days, please help me.

public function deleteCatagory($id)
{
    dd($id);
    $this->catagory_id = $id;
}

public function destroycatagory()
{
   $catagory= Catagory::find($this->catagory_id);
   $path = 'uploads/catagory/'.$catagory->image;
    if(File::exists($path)) {
        File::delete($path);
   }
    $catagory->delete();
    session()->flash('message','Catagory Deletd Successfully');
}