Yarn upgrade all the things

components/ChannelReferenceRenderer.tsx

@@ -1,17 +1,25 @@
-export const ChannelReferenceRenderer = (props: { value: string }) => {
+import React from "react";
+
+function renderStringWithChannelRefs(value: string) {
   return (
     <>
-      {props.value.split(/(<#[A-Z0-9]+\|[A-Za-z0-9]+>)/).map((str) => {
+      {value.split(/(<#[A-Z0-9]+\|[A-Za-z0-9]+>)/).map((str, i) => {
         const matches = str.match(/<#([A-Z0-9]+)\|([A-Za-z0-9]+)>/);
         if (matches) {
           return (
-            <a href={`https://app.slack.com/client/T03BQ3NU9/${matches[1]}`}>
+            <a href={`https://app.slack.com/client/T03BQ3NU9/${matches[1]}`} key={i}>
               #{matches[2]}
             </a>
           );
         }
-        return str;
+        return <React.Fragment key={i}>{str}</React.Fragment>;
       })}
     </>
   );
+}
+
+export const ChannelReferenceRenderer = ({ children }: React.PropsWithChildren<{}>) => {
+  // TODO: this should probably walk the tree
+  if (typeof children[0] === "string") return renderStringWithChannelRefs(children[0]);
+  return <>{children}</>;
 };