diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index ecad428..0831df2 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -58,7 +58,7 @@ function getComponents() {
 function getUtils() {
   return [
     { text: 'Flowbite Themable', link: '/components/flowbiteThemable/flowbiteThemable.md' },
-    { text: 'ToastProvider', link: '/components/toastProvider/toastProvider.md' },
+    { text: 'Toast Provider', link: '/components/toastProvider/toastProvider.md' },
   ]
 }
 
diff --git a/docs/components/toast/toast.md b/docs/components/toast/toast.md
index c9953c1..ad78d74 100644
--- a/docs/components/toast/toast.md
+++ b/docs/components/toast/toast.md
@@ -178,4 +178,3 @@ import { Toast } from 'flowbite-vue'
 <ToastIconExample />
 
 ---
-<ToastProviderExample />
diff --git a/src/components/Toast/components/ToastProvider/ToastProvider.vue b/src/components/Toast/components/ToastProvider/ToastProvider.vue
index fba3550..6dd4809 100644
--- a/src/components/Toast/components/ToastProvider/ToastProvider.vue
+++ b/src/components/Toast/components/ToastProvider/ToastProvider.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, h, provide, ref, resolveComponent } from 'vue'
+import { defineComponent, h, provide, ref, resolveComponent, TransitionGroup } from 'vue'
 import { FLOWBITE_TOAST_INJECTION_KEY } from '@/components/Toast/components/ToastProvider/injection/config'
 import type { ToastItem, ToastItemWithId } from '@/components/Toast/components/ToastProvider/types'
 import { Toast } from '@/index'
@@ -56,19 +56,21 @@ export default defineComponent({
 
     return h('div', {}, [
       $slots.default ? $slots.default() : null, // rendering default slot
-      h(resolveComponent('TransitionGroup'), {
+      h(TransitionGroup, {
             name: 'list',
             tag: 'div',
             class: 'xl:w-1/6 md:w-1/4 sm:w-1/4 fixed top-3 right-3 flex flex-col gap-2 z-50',
           },
-          toasts.map(_toast => // rendering every toast
-              h(resolveComponent('Toast'), {
-                closable: true,
-                type: _toast.type,
-                key: _toast.id,
-                onClose: () => removeToast(_toast.id),
-              }, _toast.text),
-          ),
+          {
+            default: () => toasts.map(_toast => // rendering every toast
+                h(Toast as any, {
+                  closable: true,
+                  type: _toast.type,
+                  key: _toast.id,
+                  onClose: () => removeToast(_toast.id),
+                }, () => _toast.text),
+            ),
+          },
       ),
     ])
   },