fixing unique "key" prop errors in react dev mode

src/element/markdown.tsx

@@ -14,81 +14,81 @@ interface MarkdownProps {
 }
 
 const Markdown = forwardRef<HTMLDivElement, MarkdownProps>((props: MarkdownProps, ref) => {
-  function renderToken(t: Token): ReactNode {
+  function renderToken(t: Token, key: number): ReactNode {
     try {
       switch (t.type) {
         case "paragraph": {
-          return <p>{t.tokens ? t.tokens.map(renderToken) : t.raw}</p>;
+          return <p key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</p>;
         }
         case "image": {
-          return <img src={t.href} />;
+          return <img key={key} src={t.href} />;
         }
         case "heading": {
           switch (t.depth) {
             case 1:
-              return <h1>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h1>;
+              return <h1 key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h1>;
             case 2:
-              return <h2>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h2>;
+              return <h2 key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h2>;
             case 3:
-              return <h3>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h3>;
+              return <h3 key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h3>;
             case 4:
-              return <h4>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h4>;
+              return <h4 key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h4>;
             case 5:
-              return <h5>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h5>;
+              return <h5 key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h5>;
             case 6:
-              return <h6>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h6>;
+              return <h6 key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h6>;
           }
           throw new Error("Invalid heading");
         }
         case "codespan": {
-          return <code>{t.raw}</code>;
+          return <code key={key}>{t.raw}</code>;
         }
         case "code": {
-          return <pre>{t.raw}</pre>;
+          return <pre key={key}>{t.raw}</pre>;
         }
         case "br": {
-          return <br />;
+          return <br key={key} />;
         }
         case "hr": {
-          return <hr />;
+          return <hr key={key} />;
         }
         case "blockquote": {
-          return <blockquote>{t.tokens ? t.tokens.map(renderToken) : t.raw}</blockquote>;
+          return <blockquote key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</blockquote>;
         }
         case "link": {
-          return <HyperText link={t.href}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</HyperText>;
+          return <HyperText link={t.href} key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</HyperText>;
         }
         case "list": {
           if (t.ordered) {
-            return <ol>{t.items.map(renderToken)}</ol>;
+            return <ol key={key}>{t.items.map(renderToken)}</ol>;
           } else {
-            return <ul>{t.items.map(renderToken)}</ul>;
+            return <ul key={key}>{t.items.map(renderToken)}</ul>;
           }
         }
         case "list_item": {
-          return <li>{t.tokens ? t.tokens.map(renderToken) : t.raw}</li>;
+          return <li key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</li>;
         }
         case "em": {
-          return <em>{t.tokens ? t.tokens.map(renderToken) : t.raw}</em>;
+          return <em key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</em>;
         }
         case "del": {
-          return <s>{t.tokens ? t.tokens.map(renderToken) : t.raw}</s>;
+          return <s key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</s>;
         }
         case "table": {
           return (
-            <table className="table-auto border-collapse">
+            <table className="table-auto border-collapse" key={key}>
               <thead>
                 <tr>
-                  {(t.header as Tokens.TableCell[]).map(v => (
-                    <th className="border">{v.tokens ? v.tokens.map(renderToken) : v.text}</th>
+                  {(t.header as Tokens.TableCell[]).map((v, h_key) => (
+                    <th className="border" key={h_key}>{v.tokens ? v.tokens.map(renderToken) : v.text}</th>
                   ))}
                 </tr>
               </thead>
               <tbody>
-                {(t.rows as Tokens.TableCell[][]).map(v => (
-                  <tr>
-                    {v.map(d => (
-                      <td className="border px-2 py-1">{d.tokens ? d.tokens.map(renderToken) : d.text}</td>
+                {(t.rows as Tokens.TableCell[][]).map((v, r_key) => (
+                  <tr key={r_key}>
+                    {v.map((d, d_key) => (
+                      <td className="border px-2 py-1" key={d_key}>{d.tokens ? d.tokens.map(renderToken) : d.text}</td>
                     ))}
                   </tr>
                 ))}
@@ -103,7 +103,7 @@ const Markdown = forwardRef<HTMLDivElement, MarkdownProps>((props: MarkdownProps
           if (props.plainText ?? false) {
             return t.raw;
           }
-          return <Text content={t.raw} tags={[]} />;
+          return <Text content={t.raw} tags={[]} key={key} />;
         }
       }
     } catch (e) {