diff --git a/src/components/MessageRenderer/CodeBlock/index.tsx b/src/components/MessageRenderer/CodeBlock/index.tsx
index 493a0d02..d240e7b8 100644
--- a/src/components/MessageRenderer/CodeBlock/index.tsx
+++ b/src/components/MessageRenderer/CodeBlock/index.tsx
@@ -7,6 +7,9 @@ import SyntaxHighlighter from 'react-syntax-highlighter';
 import darkTheme from './CodeBlockDarkTheme';
 import lightTheme from './CodeBlockLightTheme';
 
+const SyntaxHighlighterComponent =
+  SyntaxHighlighter as unknown as React.ComponentType<any>;
+
 const CodeBlock = ({
   language,
   children,
@@ -50,13 +53,13 @@ const CodeBlock = ({
           />
         )}
       </button>
-      <SyntaxHighlighter
+      <SyntaxHighlighterComponent
         language={language}
         style={syntaxTheme}
         showInlineLineNumbers
       >
         {children as string}
-      </SyntaxHighlighter>
+      </SyntaxHighlighterComponent>
     </div>
   );
 };