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 0b7bdca847d71..0622023bb97ee 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"><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>"
 `;
 
 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 779ef71873d0f..638ec3706f96e 100644
--- a/packages/docusaurus-mdx-loader/src/remark/admonitions/index.ts
+++ b/packages/docusaurus-mdx-loader/src/remark/admonitions/index.ts
@@ -149,7 +149,9 @@ const plugin: Plugin = function plugin(
           !isSimpleTextTitle && {
             type: admonitionNodeType,
             data: {
-              hName: 'mdxAdmonitionTitle',
+              // Use PascalCase, because it's a custom element replaced in
+              // client code, not Remark code, so we have to make React happy
+              hName: 'MDXAdmonitionTitle',
               hProperties: {},
             },
             children: titleNodes,
diff --git a/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx b/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx
index a8442064e808d..85323c08d58dc 100644
--- a/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx
+++ b/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx
@@ -18,7 +18,7 @@ function extractMDXAdmonitionTitle(children: ReactNode): {
     (item) =>
       React.isValidElement(item) &&
       (item.props as {mdxType: string} | null)?.mdxType ===
-        'mdxAdmonitionTitle',
+        'MDXAdmonitionTitle',
   );
   const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
   return {