diff --git a/docs/docs.trychroma.com/components/markdoc/Heading.tsx b/docs/docs.trychroma.com/components/markdoc/Heading.tsx
index 08e1bec4ffc..6295aa62e2b 100644
--- a/docs/docs.trychroma.com/components/markdoc/Heading.tsx
+++ b/docs/docs.trychroma.com/components/markdoc/Heading.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { useRouter } from 'next/router';
+import * as React from "react";
+import { useRouter } from "next/router";
 
 // Define the props type
 interface HeadingProps {
@@ -9,52 +9,59 @@ interface HeadingProps {
   className?: string;
 }
 
-export function Heading({ id = '', level = 1, children, className }: HeadingProps) {
+export function Heading({
+  id = "",
+  level = 1,
+  children,
+  className,
+}: HeadingProps) {
   const router = useRouter();
-  const Component = `h${level}`;
+  const Component: React.ElementType = `h${level}`;
 
-  const isDocs = router.pathname.startsWith('/docs');
+  const isDocs = router.pathname.startsWith("/docs");
 
   if (level === 1) {
-    className = 'text-3xl mb-6 mt-8 font-semibold';
+    className = "text-3xl mb-6 mt-8 font-semibold";
   }
   if (level === 2) {
-    className = 'text-2xl mb-4 mt-6 font-semibold';
+    className = "text-2xl mb-4 mt-6 font-semibold";
   }
   if (level === 3) {
-    className = 'text-xl mb-4 mt-4 font-semibold';
+    className = "text-xl mb-4 mt-4 font-semibold";
   }
   if (level === 4) {
-    className = 'text-lg mb-4 mt-4 font-semibold';
+    className = "text-lg mb-4 mt-4 font-semibold";
   }
   if (level === 5) {
-    className = 'text-md mb-4 mt-4 font-semibold';
+    className = "text-md mb-4 mt-4 font-semibold";
   }
   if (level === 6) {
-    className = 'text-sm mb-4 mt-4 font-semibold';
+    className = "text-sm mb-4 mt-4 font-semibold";
   }
 
-  const link = React.createElement(
-      Component,
-      { className: ['heading', className].filter(Boolean).join(' ') },
-      React.createElement('div', { id }),
-      children,
-      React.createElement(
-          'a',
-          {
-            onClick: (e) => {
-              e.preventDefault();
-              navigator.clipboard.writeText(`${window.location.origin}${router.pathname}#${id}`);
-              // Replace state with the current URL
-              window.history.replaceState(null, '', `${window.location.origin}${router.pathname}#${id}`);
-            },
-            className: 'text-gray-500 hover:text-gray-700 ml-2 cursor-pointer href-anchor',
-          },
-          '#'
-      )
+  const link = (
+    <Component className={["heading", className].filter(Boolean).join(" ")}>
+      <div id={id} />
+      {children}
+      <a
+        href="#"
+        onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+          e.preventDefault();
+          navigator.clipboard.writeText(
+            `${window.location.origin}${router.pathname}#${id}`,
+          );
+          window.history.replaceState(
+            null,
+            "",
+            `${window.location.origin}${router.pathname}#${id}`,
+          );
+        }}
+        className="text-gray-500 hover:text-gray-700 ml-2 cursor-pointer href-anchor"
+      >
+        #
+      </a>
+    </Component>
   );
 
-  return isDocs && level !== 1
-      ? React.createElement('a', { href: `#${id}` }, link)
-      : link;
+  return isDocs && level !== 1 ? <a href={`#${id}`}>{link}</a> : link;
 }