Livewire Modal not working

I have a project that I am using a modal for. Modals are working if not in livewire but when I add wire to it, it does not popup. Just refreshes the page. I am sure its something simple that I am overlooking.

index page

<div>
<!-- Modal -->
<div wire:ignore.self 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">Delete Category</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form wire:submit.prevent="destroyCategory">
      <div class="modal-body">
        <h3>Are you sure you want to delete this category?</h3>
      </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">Delete</button>
      </div>
</form>
    </div>
  </div>
</div>

       <div class="row">
          <!-- Left col -->
          <section class="col-lg-12 connectedSortable">
            <!-- Custom tabs (Charts with tabs)-->
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">
                  <i class="fas fa-chart-pie mr-1"></i>
                  View All Categories
                </h3>
                <a class="float-right btn btn-dark btn-sm" href="{{route('admin.categories.create')}}">Add Category</a>
                <div class="card-tools">
                  
                </div>
              </div><!-- /.card-header -->
              <div class="card-body">
              
               <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                 
                    @foreach($categories as $category)
                    <tr>
                        <td>{{$category->id}}</td>  
                        <td>{{$category->name}}</td>
                        <td>{{$category->slug}}</td>
                        <td>
                        @if($category->status == 1) 
                        <button class="btn btn-sm btn-success">Active</button>
                        @else
                        <button class="btn btn-sm btn-danger">Inactive</button>
                        @endif
                        </td>
                        <td>
                            <a href="{{route('admin.categories.edit',$category->id)}}"><i class="fa fa-edit btn btn-success btn-sm"></i></a>
                            <a href="" wire:click="deleteCategory({{$category->id}})" data-bs-toggle="modal" data-bs-target="#deleteModal">delete</a>
</td>                   </tr>
                    @endforeach 

                </tbody>
               </table>     
                <div class="mt-4 float-right"> {{$categories->links();}}</div>
             

              </div><!-- /.card-body -->
            </div>
            <!-- /.card -->

          
         
            <!-- /.card -->
          </section>
          <!-- /.Left col -->
          <!-- right col (We are only adding the ID to make the widgets sortable)-->
         
          <!-- right col -->
        </div>

Index.php

<?php

namespace App\Livewire\Admin\Category;

use Livewire\Component;
use App\Models\Category;
use Livewire\WithPagination;
use File;
use Alert;

class Index extends Component
{
    use WithPagination;
    protected $paginationTheme = 'bootstrap';

    public $category_id;

    public function deleteCategory($category_id)
    {
        
     
        $this->category_id = $category_id;
    }

    public function destroyCategory()
    {
        
        $category = Category::find($this->category_id);
        $path = 'backend/uploads/'.$category->image;
        if(File::exists($path)){
            File::delete($path);
        }
        $category->delete();
            toast('Category Deleted Successfully','success');
    }
    
    public function render()
    {
        $categories = Category::orderBy('id','DESC')->paginate(10);
        return view('livewire.admin.category.index',['categories'=>$categories]);
    }
}