Livewire 3 Notification Message

So, I am on livewire notification now, I created an alert with tailwind and i try to make it fully dynamic. what I did is:

<x-custom.dynamic-alert on="showAlert" role="alert" />

dispachting from functions like this:

public function markComplete($id)
    {
        $todo = Todo::withTrashed()->where(['id' => $id, 'user_id' => Auth::id()])->first();

        if($todo && $todo->trashed()){
            $this->dispatch('showAlert', ['message' => 'Cannot mark a deleted task as complete.', 'type' => 'error']);
            return;
        }

        if ($todo) {
            $todo->isCompleted = !$todo->isCompleted;
            $todo->save();
            $this->getTodos();
            $this->dispatch('showAlert', ['message' => 'Task mark as as completed.', 'type' => 'success']);
        }
    }

here is the component:

@props(['on', 'type' => 'success', 'message' => $message])

<div x-data="{ shown: false, timeout: null }"
     x-init="@this.on('{{ $on }}', event => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000); })"
     x-show.transition.out.opacity.duration.1500ms="shown"
     x-transition:leave.opacity.duration.1500ms
     style="display: none;"
     {{ $attributes->merge([
         'class' => 'text-black p-3 text-md shadow-md flex items-center border rounded-lg ' . ($type === 'success' ? 'border-green-500 bg-green-400' : 'border-red-500 bg-red-600'),
     ]) }}>
    {{ $slot->isEmpty() ? $message : ''  }}
</div>

now it is show danger alert with $message, not the original message and alert color. then I try to dd() the dispatch event and found:

Livewire\Features\SupportEvents\Event {#1777 ▼ // app\Livewire\Todos\Todos.php:156
  #name: "showAlert"
  #params: array:1 [▼
    0 => array:2 [▼
      "message" => "Cannot mark a deleted task as complete."
      "type" => "error"
    ]
  ]
  #self: null
  #component: null
}

I don't understand how can I access the message and the type.