Code blocks are converted to double nested code blocks

[dgrcode]

The package ReactMarkdown transforms code blocks into the following html:

<pre>
  <code>
    some code
  </code>
</pre>

That html is then transformed by this package to the following jsx:

<Code>
  <Code>
    some code
  </Code>
</Code>

I'm not sure if that behaviour is expected.

Using the following custom component transformation solved my problem:

export const chakraMarkdownComponents = {
  code: ({ children }) => <Code>{children}</Code>,
  pre: ({ children }) => (
    <chakra.pre display="block" borderRadius="md" mb={4} p={3} bg="gray.100">
      {children}
    </chakra.pre>
  ),
};

(EDIT: I updated the code snippet above because the previous one was breaking inline code blocks)