fix(ui): support react node content in ConfirmationModal heading and body (#12841)

### What?

This update improves the flexibility of the ConfirmationModal by
allowing the `heading` and `body` prop to accept either a string or a
React node.

If the `heading` or `body` is a string, it will be wrapped in its
respective tags for consistent styling.

If it's already a React element, it will be rendered as-is. This
prevents layout issues when passing JSX content like lists, links, or
formatted elements into the modal heading and body.

packages/ui/src/elements/ConfirmationModal/index.tsx

@@ -76,8 +76,8 @@ export function ConfirmationModal(props: ConfirmationModalProps) {
     >
       <div className={`${baseClass}__wrapper`}>
         <div className={`${baseClass}__content`}>
-          <h1>{heading}</h1>
-          <p>{body}</p>
+          {typeof heading === 'string' ? <h1>{heading}</h1> : heading}
+          {typeof body === 'string' ? <p>{body}</p> : body}
         </div>
         <div className={`${baseClass}__controls`}>
           <Button