diff --git a/frontend/src/components/categories/index.tsx b/frontend/src/components/categories/index.tsx
index ed033d2b..5c805b54 100644
--- a/frontend/src/components/categories/index.tsx
+++ b/frontend/src/components/categories/index.tsx
@@ -80,7 +80,7 @@ export const Categories = () => {
       {
         label: ActionColumnLabel.Delete,
         action: async ({ id }) => {
-          const isConfirmed = await dialogs.confirm(<ConfirmDialogBody />);
+          const isConfirmed = await dialogs.confirm(ConfirmDialogBody);
 
           if (isConfirmed) {
             deleteCategory(id);
@@ -160,10 +160,10 @@ export const Categories = () => {
               color="error"
               variant="contained"
               onClick={async () => {
-                const isConfirmed = await dialogs.confirm(
-                  <ConfirmDialogBody />,
-                  { mode: "selection", count: selectedCategories.length },
-                );
+                const isConfirmed = await dialogs.confirm(ConfirmDialogBody, {
+                  mode: "selection",
+                  count: selectedCategories.length,
+                });
 
                 if (isConfirmed) {
                   deleteCategories(selectedCategories);
diff --git a/frontend/src/hooks/useDialogs.ts b/frontend/src/hooks/useDialogs.ts
index 53dd0894..ec3ee7bd 100644
--- a/frontend/src/hooks/useDialogs.ts
+++ b/frontend/src/hooks/useDialogs.ts
@@ -38,7 +38,7 @@ export const useDialogs = (): DialogHook => {
         ConfirmDialog,
         {
           ...rest,
-          msg,
+          msg: React.createElement(msg),
         },
         {
           mode,
diff --git a/frontend/src/types/common/dialogs.types.ts b/frontend/src/types/common/dialogs.types.ts
index 980cb584..9c884f15 100644
--- a/frontend/src/types/common/dialogs.types.ts
+++ b/frontend/src/types/common/dialogs.types.ts
@@ -114,7 +114,7 @@ export interface OpenConfirmDialog {
    * @param options Additional options for the dialog.
    * @returns A promise that resolves to true if the user confirms, false if the user cancels.
    */
-  (msg: React.ReactNode, options?: ConfirmOptions): Promise<boolean>;
+  (msg: React.ComponentType, options?: ConfirmOptions): Promise<boolean>;
 }
 
 export interface DialogHook {