diff --git a/components/dialog/ConfirmationDialogContent.tsx b/components/dialog/ConfirmationDialogContent.tsx
index 7ffa627e6f..54c4ae6dc5 100644
--- a/components/dialog/ConfirmationDialogContent.tsx
+++ b/components/dialog/ConfirmationDialogContent.tsx
@@ -33,11 +33,11 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
         </div>
       </div>
       <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-x-2">
-        <DialogClose as={Button} color="primary" onClick={onConfirm}>
-          {confirmBtnText}
+        <DialogClose onClick={onConfirm} asChild>
+          <Button color="primary">{confirmBtnText}</Button>
         </DialogClose>
-        <DialogClose as={Button} color="secondary">
-          {cancelBtnText}
+        <DialogClose asChild>
+          <Button color="secondary">{cancelBtnText}</Button>
         </DialogClose>
       </div>
     </DialogContent>