Modal not showing properly in Laravel Livewire Powergrid

Question

I am using Laravel livewire powergrid and want to do a CRUD operation using modal. In my Controllers/Livewire/Users/UserTable.php component

public function actions(): array
    {
        return [
Button::make('edit', '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>')
                ->can()
                ->target('')
                ->tooltip('Edit')
                ->class('btn btn-sm btn-outline-primary')
                ->openModal('users.edit-user', ['users' => 'id']),
]

}

In App\Http\Livewire\Users\EditUser.php

<?php

namespace App\Http\Livewire\Users;

use Livewire\Component;
use LivewireUI\Modal\ModalComponent;
use App\Models\User;

class EditUser extends ModalComponent
{
    public $users;
    //protected $listeners = ['showSpiceAlert'];

    public function mount()
    {
        // Load user data
        $this->users = User::all();
    }
    public static function modalMaxWidth(): string
    {
        return 'md';
    }

    public static function closeModalOnEscape(): bool
    {
        return false;
    }

    public static function closeModalOnClickAway(): bool
    {
        return false;
    }
    public function render()
    {
        return view('livewire.users.edit-user');
    }
}

In views\livewire\users\edit-user.blade.php

<div>
    <h5 class="modal-title">Example Modal</h5>
    <div class="modal-body">
        <div class="mb-3">
            <label for="name">Name:</label>
            <input type="text" class="form-control" id="name" wire:model="name">
            @error('name') <span class="text-danger">{{ $message }}</span> @enderror
        </div>
        <div class="mb-3">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email" wire:model="email">
            @error('email') <span class="text-danger">{{ $message }}</span> @enderror
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" wire:click="$emit('closeModal')">Close</button>
        <button type="button" class="btn btn-primary" wire:click="save">Save</button>
    </div>
</div>

in \views\users\index.blade.php

@extends('layouts.app')


@section('title', 'Users')

@push('head_resources')
    @livewireStyles
@endpush

@section('content')
@include('livewire.studentmodal')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Page title -->
                    <h2 class="page-title">
                        Users
                    </h2>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#modal-create">
                            + Add New
                          </a>
                    </div>
                </div>
                <button onclick="Livewire.emit('openModal', 'users.edit-user', {{ json_encode(['user' => 1]) }})">Edit User</button>

                <button type="button" data-bs-toggle="modal" data-bs-target="#updateStudentModal" wire:click="editStudent(1)" class="btn btn-primary">
                    Edit New
                </button>
                <button  wire:click="$emitTo('division-dropdown-component', 'showSpiceAlert', ['key' => 1, 'modal' => true])">
                    Emit 'postAdded' Event
                </button>
            </div>
        </div>
    </div>
    @livewire('users.create')
    @livewire('division-dropdown-component')

    @livewire('livewire-ui-modal')
    
    <div class="page-body">
        <div class="container-xl">
            <div class="row row-cards justify-content-center">
                <div class="col-md-12">
                   <div class="card">
                    <div class="card-body">
                        @livewire('users.user-table')
                       
                    </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('body_resources')

    @livewireScripts
    
@endpush

@section('script')

<script>
    window.addEventListener('close-modal', event => {

        $('#studentModal').modal('hide');
        $('#updateStudentModal').modal('hide');
        $('#deleteStudentModal').modal('hide');
    })
</script>
@endsection

But my modal is not poped up. When I click Edit Button It shows input fields at the top of table but not showing like a modal.

Is there any change I need to do or @livewire('livewire-ui-modal') position is wrong?