diff --git a/packages/docusaurus-mdx-loader/src/remark/admonitions/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus-mdx-loader/src/remark/admonitions/__tests__/__snapshots__/index.test.ts.snap
index 0b7bdca847d7..a19488a73fb9 100644
--- a/packages/docusaurus-mdx-loader/src/remark/admonitions/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/docusaurus-mdx-loader/src/remark/admonitions/__tests__/__snapshots__/index.test.ts.snap
@@ -51,7 +51,7 @@ exports[`admonitions remark plugin default behavior for custom keyword 1`] = `
 
 exports[`admonitions remark plugin interpolation 1`] = `
 "<p>Test admonition with interpolated title/body</p>
-<admonition type="tip"><mdxAdmonitionTitle>My <code>interpolated</code> <strong>title</strong> &#x3C;button style={{color: "red"}} onClick={() => alert("click")}>test</mdxAdmonitionTitle><p><code>body</code> <strong>interpolated</strong> content</p></admonition>"
+<admonition type="tip"><template data-admonition-title></template><p><code>body</code> <strong>interpolated</strong> content</p></admonition>"
 `;
 
 exports[`admonitions remark plugin replace custom keyword 1`] = `
diff --git a/packages/docusaurus-mdx-loader/src/remark/admonitions/index.ts b/packages/docusaurus-mdx-loader/src/remark/admonitions/index.ts
index 779ef71873d0..93dd827b7b5a 100644
--- a/packages/docusaurus-mdx-loader/src/remark/admonitions/index.ts
+++ b/packages/docusaurus-mdx-loader/src/remark/admonitions/index.ts
@@ -149,8 +149,12 @@ const plugin: Plugin = function plugin(
           !isSimpleTextTitle && {
             type: admonitionNodeType,
             data: {
-              hName: 'mdxAdmonitionTitle',
-              hProperties: {},
+              // Note: this has to be valid markup itself, because it's replaced
+              // by client code, not MDX loader, so React sees the content
+              hName: 'template',
+              hProperties: {
+                'data-admonition-title': true,
+              },
             },
             children: titleNodes,
           },
diff --git a/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx b/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx
index a8442064e808..fad1fd1f6b5a 100644
--- a/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx
+++ b/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx
@@ -14,15 +14,21 @@ function extractMDXAdmonitionTitle(children: ReactNode): {
   rest: ReactNode;
 } {
   const items = React.Children.toArray(children);
-  const mdxAdmonitionTitle = items.find(
-    (item) =>
-      React.isValidElement(item) &&
-      (item.props as {mdxType: string} | null)?.mdxType ===
-        'mdxAdmonitionTitle',
-  );
+  const mdxAdmonitionTitle = items.find((item) => {
+    if (!React.isValidElement(item)) {
+      return false;
+    }
+    const props = item.props as {
+      mdxType: string;
+      'data-admonition-title'?: boolean;
+    } | null;
+    return (
+      props?.mdxType === 'template' && props['data-admonition-title'] === true
+    );
+  }) as JSX.Element | undefined;
   const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
   return {
-    mdxAdmonitionTitle,
+    mdxAdmonitionTitle: mdxAdmonitionTitle?.props.children,
     rest,
   };
 }