diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx b/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx
index fbbc18fc0..5904145c0 100644
--- a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx
+++ b/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx
@@ -31,8 +31,8 @@ const Contact = ({ isOpen, onCancel }: Props) => {
                 <ContactIcon />
               </div>
               <div className={styles.text}>
-                <div className={styles.title}>{String(t(title))}</div>
-                <div className={styles.description}>{String(t(description))}</div>
+                <div className={styles.title}>{t(title)}</div>
+                <div className={styles.description}>{t(description)}</div>
               </div>
               <div>
                 <Button
diff --git a/packages/console/src/components/Button/index.tsx b/packages/console/src/components/Button/index.tsx
index ff503eb8e..9f0ee18fb 100644
--- a/packages/console/src/components/Button/index.tsx
+++ b/packages/console/src/components/Button/index.tsx
@@ -82,7 +82,7 @@ const Button = ({
     >
       {showSpinner && <Spinner className={styles.spinner} />}
       {icon && <span className={styles.icon}>{icon}</span>}
-      {title && (typeof title === 'string' ? <span>{String(t(title))}</span> : title)}
+      {title && (typeof title === 'string' ? <span>{t(title)}</span> : title)}
     </button>
   );
 };
diff --git a/packages/console/src/components/CardTitle/index.tsx b/packages/console/src/components/CardTitle/index.tsx
index e5c6fa7ea..686bdd117 100644
--- a/packages/console/src/components/CardTitle/index.tsx
+++ b/packages/console/src/components/CardTitle/index.tsx
@@ -20,10 +20,10 @@ const CardTitle = ({ title, subtitle, size = 'large' }: Props) => {
 
   return (
     <div className={classNames(styles.container, styles[size])}>
-      <div className={styles.title}>{typeof title === 'string' ? String(t(title)) : title}</div>
+      <div className={styles.title}>{typeof title === 'string' ? t(title) : title}</div>
       {subtitle && (
         <div className={styles.subtitle}>
-          {typeof subtitle === 'string' ? String(t(subtitle)) : subtitle}
+          {typeof subtitle === 'string' ? t(subtitle) : subtitle}
         </div>
       )}
     </div>
diff --git a/packages/console/src/components/Dropdown/DropdownItem.tsx b/packages/console/src/components/Dropdown/DropdownItem.tsx
index 85802f635..d174d8901 100644
--- a/packages/console/src/components/Dropdown/DropdownItem.tsx
+++ b/packages/console/src/components/Dropdown/DropdownItem.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { MouseEvent, ReactNode } from 'react';
+import { MouseEvent, ReactNode } from 'react';
 
 import * as styles from './DropdownItem.module.scss';
 
@@ -22,7 +22,7 @@ const DropdownItem = ({
 }: Props) => (
   <li className={classNames(styles.item, styles[type], className)} onClick={onClick}>
     {icon && <span className={classNames(styles.icon, iconClassName)}>{icon}</span>}
-    {React.isValidElement(children) ? children : String(children)}
+    {children}
   </li>
 );
 
diff --git a/packages/console/src/components/FormField/index.tsx b/packages/console/src/components/FormField/index.tsx
index 377aacdf2..f5f4c9965 100644
--- a/packages/console/src/components/FormField/index.tsx
+++ b/packages/console/src/components/FormField/index.tsx
@@ -25,7 +25,7 @@ const FormField = ({ title, children, isRequired, className, tooltip }: Props) =
   return (
     <div className={classNames(styles.field, className)}>
       <div className={styles.headline}>
-        <div className={styles.title}>{typeof title === 'string' ? String(t(title)) : title}</div>
+        <div className={styles.title}>{typeof title === 'string' ? t(title) : title}</div>
         {tooltip && (
           <div ref={tipRef} className={styles.icon}>
             <Tip />
diff --git a/packages/console/src/components/LinkButton/index.tsx b/packages/console/src/components/LinkButton/index.tsx
index 63f7a1765..3ab773a79 100644
--- a/packages/console/src/components/LinkButton/index.tsx
+++ b/packages/console/src/components/LinkButton/index.tsx
@@ -20,7 +20,7 @@ const LinkButton = ({ to, title, icon, className }: Props) => {
   return (
     <Link to={to} className={classNames(styles.linkButton, className)}>
       {icon}
-      {typeof title === 'string' ? <span>{String(t(title))}</span> : title}
+      {typeof title === 'string' ? <span>{t(title)}</span> : title}
     </Link>
   );
 };
diff --git a/packages/console/src/components/RadioGroup/Radio.tsx b/packages/console/src/components/RadioGroup/Radio.tsx
index 0e7ac3c5f..8791c4d4f 100644
--- a/packages/console/src/components/RadioGroup/Radio.tsx
+++ b/packages/console/src/components/RadioGroup/Radio.tsx
@@ -76,9 +76,9 @@ const Radio = ({
       {type === 'card' && <Check />}
       {children}
       {type === 'plain' && <div className={styles.indicator} />}
-      {title && String(t(title))}
+      {title && t(title)}
       {isDisabled && disabledLabel && (
-        <div className={styles.disabledLabel}>{String(t(disabledLabel))}</div>
+        <div className={styles.disabledLabel}>{t(disabledLabel)}</div>
       )}
     </div>
   );
diff --git a/packages/console/src/components/Tooltip/index.tsx b/packages/console/src/components/Tooltip/index.tsx
index efe848a0a..2466e95ba 100644
--- a/packages/console/src/components/Tooltip/index.tsx
+++ b/packages/console/src/components/Tooltip/index.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ReactNode, RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { ReactNode, RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import usePosition, { HorizontalAlignment } from '@/hooks/use-position';
@@ -131,9 +131,7 @@ const Tooltip = ({
       )}
       style={{ ...position }}
     >
-      <div className={styles.content}>
-        {React.isValidElement(content) ? content : String(content)}
-      </div>
+      <div className={styles.content}>{content}</div>
     </div>,
     tooltipDom
   );
diff --git a/packages/console/src/include.d/react-i18next.d.ts b/packages/console/src/include.d/react-i18next.d.ts
index adbe43039..4220b8a6c 100644
--- a/packages/console/src/include.d/react-i18next.d.ts
+++ b/packages/console/src/include.d/react-i18next.d.ts
@@ -1,11 +1,14 @@
 // https://react.i18next.com/latest/typescript#create-a-declaration-file
 
-// eslint-disable-next-line import/no-unassigned-import
-import 'react-i18next';
-import en from '@logto/phrases/lib/locales/en.js';
+import { Translation, Errors } from '@logto/phrases';
+import { CustomTypeOptions } from 'react-i18next';
 
 declare module 'react-i18next' {
   interface CustomTypeOptions {
-    resources: typeof en;
+    allowObjectInHTMLChildren: true;
+    resources: {
+      translation: Translation;
+      errors: Errors;
+    };
   }
 }
diff --git a/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx b/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx
index 17bf8f87c..d27b77c1f 100644
--- a/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.tsx
@@ -48,7 +48,7 @@ const ConnectorTabs = ({ target, connectorId }: Props) => {
               <ConnectorPlatformIcon platform={connector.platform} />
             </div>
           )}
-          {connector.platform && String(t(connectorPlatformLabel[connector.platform]))}
+          {connector.platform && t(connectorPlatformLabel[connector.platform])}
         </Link>
       ))}
     </div>
diff --git a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
index c8004b707..5d34bf52e 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
@@ -34,7 +34,7 @@ const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
       <ItemPreview
         title={
           <div className={styles.previewTitle}>
-            <div>{String(t(connectorTitlePlaceHolder[type]))}</div>
+            <div>{t(connectorTitlePlaceHolder[type])}</div>
             {type !== ConnectorType.Social && (
               <Button title="general.set_up" onClick={onClickSetup} />
             )}
@@ -63,7 +63,7 @@ const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
                     platform && (
                       <div key={id} className={styles.platform}>
                         <ConnectorPlatformIcon platform={platform} />
-                        {String(t(`${connectorPlatformLabel[platform]}`))}
+                        {t(`${connectorPlatformLabel[platform]}`)}
                       </div>
                     )
                 )}
diff --git a/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx
index b2db8189a..cfabb6b07 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx
@@ -36,7 +36,7 @@ const ConnectorRow = ({ type, connectors, onClickSetup }: Props) => {
       <td>
         <ConnectorName type={type} connectors={connectors} onClickSetup={onClickSetup} />
       </td>
-      <td>{String(t(connectorTitlePlaceHolder[type]))}</td>
+      <td>{t(connectorTitlePlaceHolder[type])}</td>
       <td>
         {inUse !== undefined && (
           <Status status={inUse ? 'enabled' : 'disabled'}>
diff --git a/packages/console/src/pages/Dashboard/components/Block.tsx b/packages/console/src/pages/Dashboard/components/Block.tsx
index 631617687..df4fcf695 100644
--- a/packages/console/src/pages/Dashboard/components/Block.tsx
+++ b/packages/console/src/pages/Dashboard/components/Block.tsx
@@ -29,7 +29,7 @@ const Block = ({ variant = 'default', count, delta, title, tooltip }: Props) =>
   return (
     <Card className={classNames(styles.block, styles[variant])}>
       <div className={styles.title}>
-        {String(t(title))}
+        {t(title)}
         {tooltip && (
           <div ref={tipRef} className={styles.icon}>
             <Tip />
diff --git a/packages/console/src/pages/GetStarted/index.tsx b/packages/console/src/pages/GetStarted/index.tsx
index 2a1fe2820..c3f699f1d 100644
--- a/packages/console/src/pages/GetStarted/index.tsx
+++ b/packages/console/src/pages/GetStarted/index.tsx
@@ -53,8 +53,8 @@ const GetStarted = () => {
             {!isComplete && <CardIcon className={styles.icon} />}
             {isComplete && <CompleteIndicator className={styles.icon} />}
             <div className={styles.wrapper}>
-              <div className={styles.title}>{String(t(title))}</div>
-              <div className={styles.subtitle}>{String(t(subtitle))}</div>
+              <div className={styles.title}>{t(title)}</div>
+              <div className={styles.subtitle}>{t(subtitle)}</div>
             </div>
             <Button
               className={styles.button}
diff --git a/packages/demo-app/src/App.tsx b/packages/demo-app/src/App.tsx
index 1b1d504e0..0c9b08fa0 100644
--- a/packages/demo-app/src/App.tsx
+++ b/packages/demo-app/src/App.tsx
@@ -62,17 +62,17 @@ const Main = () => {
     <div className={styles.app}>
       <div className={styles.card}>
         {congratsIcon && <img src={congratsIcon} alt="Congrats" />}
-        <div className={styles.title}>{String(t('title'))}</div>
-        <div className={styles.text}>{String(t('subtitle'))}</div>
+        <div className={styles.title}>{t('title')}</div>
+        <div className={styles.text}>{t('subtitle')}</div>
         <div className={styles.infoCard}>
           {user.username && (
             <div>
-              {String(t('username'))}
+              {t('username')}
               <span>{user.username}</span>
             </div>
           )}
           <div>
-            {String(t('user_id'))}
+            {t('user_id')}
             <span>{user.sub}</span>
           </div>
         </div>
@@ -80,7 +80,7 @@ const Main = () => {
           className={styles.button}
           onClick={async () => signOut(`${window.location.origin}/demo-app`)}
         >
-          {String(t('sign_out'))}
+          {t('sign_out')}
         </div>
       </div>
     </div>
diff --git a/packages/console/src/i18n/react-i18next.d.ts b/packages/demo-app/src/include.d/react-i18next.d.ts
similarity index 69%
rename from packages/console/src/i18n/react-i18next.d.ts
rename to packages/demo-app/src/include.d/react-i18next.d.ts
index 741c7b9c6..4220b8a6c 100644
--- a/packages/console/src/i18n/react-i18next.d.ts
+++ b/packages/demo-app/src/include.d/react-i18next.d.ts
@@ -1,8 +1,11 @@
+// https://react.i18next.com/latest/typescript#create-a-declaration-file
+
 import { Translation, Errors } from '@logto/phrases';
 import { CustomTypeOptions } from 'react-i18next';
 
 declare module 'react-i18next' {
   interface CustomTypeOptions {
+    allowObjectInHTMLChildren: true;
     resources: {
       translation: Translation;
       errors: Errors;
diff --git a/packages/ui/src/components/Button/index.tsx b/packages/ui/src/components/Button/index.tsx
index a565b48aa..97c16f050 100644
--- a/packages/ui/src/components/Button/index.tsx
+++ b/packages/ui/src/components/Button/index.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import * as styles from './index.module.scss';
 
@@ -34,7 +34,7 @@ const Button = ({
     type={htmlType}
     onClick={onClick}
   >
-    {React.isValidElement(children) ? children : String(children)}
+    {children}
   </button>
 );
 
diff --git a/packages/ui/src/components/Divider/index.tsx b/packages/ui/src/components/Divider/index.tsx
index 3df19c15e..7964bb498 100644
--- a/packages/ui/src/components/Divider/index.tsx
+++ b/packages/ui/src/components/Divider/index.tsx
@@ -14,7 +14,7 @@ const Divider = ({ className, label }: Props) => {
   return (
     <div className={classNames(styles.divider, className)}>
       <i className={styles.line} />
-      {label && String(t(label))}
+      {label && t(label)}
       <i className={styles.line} />
     </div>
   );
diff --git a/packages/ui/src/components/TextLink/index.tsx b/packages/ui/src/components/TextLink/index.tsx
index 9f7b6fa17..8e10648f6 100644
--- a/packages/ui/src/components/TextLink/index.tsx
+++ b/packages/ui/src/components/TextLink/index.tsx
@@ -19,14 +19,14 @@ const TextLink = ({ className, children, text, type = 'primary', to, ...rest }:
   if (to) {
     return (
       <Link className={classNames(styles.link, styles[type], className)} to={to}>
-        {children ?? (text ? String(t(text)) : '')}
+        {children ?? (text ? t(text) : '')}
       </Link>
     );
   }
 
   return (
     <a className={classNames(styles.link, styles[type], className)} {...rest} rel="noreferrer">
-      {children ?? (text ? String(t(text)) : '')}
+      {children ?? (text ? t(text) : '')}
     </a>
   );
 };
diff --git a/packages/ui/src/include.d/react-i18next.d.ts b/packages/ui/src/include.d/react-i18next.d.ts
index 816fe0207..4b99b1185 100644
--- a/packages/ui/src/include.d/react-i18next.d.ts
+++ b/packages/ui/src/include.d/react-i18next.d.ts
@@ -6,6 +6,7 @@ import en from '@logto/phrases-ui/lib/locales/en.js';
 
 declare module 'react-i18next' {
   interface CustomTypeOptions {
+    allowObjectInHTMLChildren: true;
     resources: typeof en;
   }
 }
diff --git a/packages/ui/src/pages/ErrorPage/index.tsx b/packages/ui/src/pages/ErrorPage/index.tsx
index fcda12f8c..23efdbf27 100644
--- a/packages/ui/src/pages/ErrorPage/index.tsx
+++ b/packages/ui/src/pages/ErrorPage/index.tsx
@@ -24,7 +24,7 @@ const ErrorPage = ({ title = 'description.not_found', message, rawMessage }: Pro
       <NavBar />
       <div className={styles.container}>
         <ErrorImage />
-        <div className={styles.title}>{String(t(title))}</div>
+        <div className={styles.title}>{t(title)}</div>
         {errorMessage && <div className={styles.message}>{String(errorMessage)}</div>}
       </div>
       <Button