Как правильно вложить модальный компонент?

У меня проблема. Я пытаюсь создать модальное окно для отчетов, которое динамически обслуживает как комментарии, так и сообщения, поэтому нет необходимости создавать несколько модальных окон. Я создал один компонент для отчетов, который будет обслуживать оба типа отчетов, но мне сложно обеспечить, чтобы для данного типа открывалось только одно модальное окно, либо для публикации, либо для комментария. В настоящее время оба модальных окна открываются одновременно — когда я отправляю одно, открывается и другое. Я могу пожаловаться как на публикацию, так и на комментарий в одном представлении. Однако я хочу, чтобы модальное окно открывалось только для определенного типа. Я даже пробовал создать два модальных окна с разными действиями, но это тоже не помогло. Что касается сохранения данных в базе данных, то все работает нормально. Вопрос не связан с этим. Меня больше беспокоит процесс внешнего интерфейса: как открывать модальное окно отдельно для каждого компонента в зависимости от того, что щелкает пользователь, а не открытие обоих окон одновременно. Спасибо вам за вашу помощь.

Это мой компонент report.blade.php, который является модальным и имеет функциональность.

<?php

use Livewire\Volt\Component;
use App\Models\Post;
use App\Models\Report;
use Mary\Traits\Toast;
use Illuminate\Database\Eloquent\Model;

new class extends Component {
    use Toast;
    protected $listeners = ['openReportModal'];

    public Model $model;
    public $reportableType;
    public $reportableId;

    public bool $report_modal = false;
    public array $selectedReports = [];

    public function mount(Model $model): void
    {
        $this->model = $model;
        $this->reportable_type = $model->reportable_type;
        $this->reportable_id = $model->reportable_id;
    }

    public function openReportModal($params)
    {
        $this->reportable_id = $params['id'];
        $this->reportable_type = $params['type'];
        $this->report_modal = true;
    }

    public function reportTypes()
    {
        $reportTypes = [
            'Spam' => 'Spam',
            'Nepřístojný' => 'Nepřístojný obsah',
            'Urážlivý' => 'Urážlivý',
            'Jiné' => 'Jiné',
        ];
        return $reportTypes;
    }
    public function report(): void
    {
        if (auth()->check()) {
            $selectedReports = $this->selectedReports;

            if (empty($selectedReports)) {
                $this->error('Vyberte prosím alespoň jeden typ reportu.');
                return;
            }

            $reportData = [
                'user_id' => auth()->user()->id,
                'reportable_id' => $this->model->id,
                'reportable_type' => class_basename($this->model),
            ];

            foreach ($selectedReports as $reportType) {
                switch ($reportType) {
                    case 'Spam':
                        $reportData['spam'] = true;
                        break;
                    case 'Nepřístojný':
                        $reportData['inappropriate'] = true;
                        break;
                    case 'Urážlivý':
                        $reportData['offensive'] = true;
                        break;
                    case 'Jiné':
                        $reportData['other'] = true;
                        break;
                }
            }

            $report = new Report($reportData);
            $report->save();
            $this->reset(['report_modal', 'selectedReports']);

            $objectType = $this->model instanceof Post ? 'Příspěvek' : 'Komentář';
            $this->success("$objectType byl nahlášen.");
        }
    }
}; ?>

<div>
    <x-modal wire:model = "report_modal" title = "Nahlášení" subtitle = "Pokud je komentář nevhodný, můžete ho zde nahlásit"
        separator>
        <form wire:submit.prevent = "report">
            @foreach ($this->reportTypes() as $key => $reportType)
                <div class = "flex items-center justify-left mb-2">
                    <input type = "checkbox" id = "{{ $key }}" wire:model = "selectedReports" value = "{{ $key }}"
                        class = "mr-2">
                    <label for = "{{ $key }}">{{ $reportType }}</label>
                </div>
            @endforeach
            <x-slot name = "actions">
                <x-button label = "Cancel" @click = "$wire.report_modal = false" />
                <x-button label = "Confirm" @click = "$wire.report" class = "btn-primary" type = "submit" />
            </x-slot>
        </form>
    </x-modal>


</div>

Это карточка комментариев, где я вызываю модальное окно

public function openReportModal(){
        $this->dispatch('openReportModal', ['id' => $this->comment->id, 'type' => get_class($this->comment)]);

    }

<x-slot:menu>
            <x-dropdown right>
                <x-slot name = "trigger">
                    <x-button icon = "o-ellipsis-vertical" class = "btn-sm btn-ghost btn-circle" />
                </x-slot>
                @if (auth()->check())
                    <x-menu-item title = "Nahlásit" icon = "m-shield-exclamation" @click = "$wire.openReportModal"
                        class = "text-error" />
                @endif
                @if ($comment->author->isMyself())
                    <x-menu-item title = "Editace" icon = "o-pencil" @click = "$wire.editing = true" />
                    <x-menu-item title = "Smazat" icon = "o-trash" wire:click = "delete({{ $comment->id }})"
                        class = "text-error" />
                @endif
            </x-dropdown>

        </x-slot:menu>

        <livewire:reports.reports :model = "$comment" :reportable_type = "$comment->reportable_type" :reportable_id = "$comment->reportable_id"/>

Это компонент пост-шоу, где я также вызываю отчеты.

 public function openReportModal(){
        $this->dispatch('openReportModal', ['id' => $this->post->id, 'type' => 'Post']);
    }

@if ($post->author->isMyself())
            <div>
                @if (! $post->archived_at)
                    <x-button label = "Archivovat" wire:click = "archive" icon = "o-archive-box" class = "btn-sm btn-ghost" />
                    <x-button label = "Editace" link = "/posts/{{ $post->id }}/edit" icon = "o-pencil" class = "btn-sm btn-ghost" />
                    <x-button label = "Nahlásit" icon = "m-shield-exclamation" @click = "$wire.openReportModal" class = "btn-sm btn-error" />

                    <x-button label = "Smazat" wire:click = "delete({{ $post->id }})" icon = "o-trash" class = "btn-sm btn-error " />
                    @else
                    <x-button label = "Unarchive" wire:click = "unarchive" icon = "o-archive-box" class = "btn-sm btn-ghost" />
                @endif
            </div>
        @endif

    <livewire:reports.reports :model = "$post" :reportable_type = "$post->reportable_type" :reportable_id = "$post->reportable_id"/>

Я даже не помню всего, что пробовал, но мне нужно иметь одно динамическое модальное окно для нескольких моделей. Однако, когда я нахожусь на веб-странице и у меня есть одно сообщение и два комментария, модальное окно открывается три раза... кажется, для каждого объекта.