title: Using syntax highlighter with tsx react markdown
body: <p>I'm following the Github <a href="https://github.com/remarkjs/react-markdown" rel="nofollow noreferrer">https://github.com/remarkjs/react-markdown</a> and am trying to add SyntaxHighlighter to my markdown code snippets. I'm getting an error mentioned below when trying to use the example code inside a function which I use to render the posts. Markdown is using three backticks and this uses NextJS.</p>
  <p>If I comment out the line <code>{...props}</code> the red underline is removed but I dont see the code taking effect in my posts</p>
  <p>Tried adding any as below but still I dont see any effect in the markdown.</p>
  <p><code>code({ node, inline, className, children, ...props }: any)</code></p>
  <p>Error:</p>
  <pre><code>No overload matches this call.
    Overload 1 of 2, '(props: SyntaxHighlighterProps | Readonly&lt;SyntaxHighlighterProps&gt;): SyntaxHighlighter', gave the following error.
      Type '{ ref?: LegacyRef&lt;HTMLElement&gt; | undefined; key?: Key | null | undefined; defaultChecked?: boolean | undefined; defaultValue?: string | number | readonly string[] | undefined; ... 255 more ...; PreTag: string; }' is not assignable to type 'IntrinsicClassAttributes&lt;SyntaxHighlighter&gt;'.
        Types of property 'ref' are incompatible.
          Type 'LegacyRef&lt;HTMLElement&gt; | undefined' is not assignable to type 'LegacyRef&lt;SyntaxHighlighter&gt; | undefined'.
            Type '(instance: HTMLElement | null) =&gt; void' is not assignable to type 'LegacyRef&lt;SyntaxHighlighter&gt; | undefined'.
              Type '(instance: HTMLElement | null) =&gt; void' is not assignable to type 
  </code></pre>
  <p>Code:</p>
  <pre><code>const BlogPost = ({ frontMatter, markdownBody }: BlogPostProps) =&gt; {
    if (!frontMatter) return &lt;&gt;&lt;/&gt;;
    return (
      &lt;Layout&gt;
        &lt;ReactMarkdown
          components={{
            code({ node, inline, className, children, ...props }) {
              const match = /language-(\w+)/.exec(className || &quot;&quot;);
              return !inline &amp;&amp; match ? (
                &lt;SyntaxHighlighter
                  style={vscDarkPlus}
                  language={match[1]}
                  PreTag=&quot;div&quot;
                  // {...props}
                &gt;
                  {String(children).replace(/\n$/, &quot;&quot;)}
                &lt;/SyntaxHighlighter&gt;
              ) : (
                &lt;code className={className} {...props}&gt;
                  {children}
                &lt;/code&gt;
              );
            },
          }}
        &gt;
          {markdownBody}
        &lt;/ReactMarkdown&gt;
      &lt;/Layout&gt;
    );
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Rwd8W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rwd8W.png" alt="enter image description here" /></a></p>