CodeBlock mis-indents string children in MDX

[restorenode]

Describe the bug
CodeBlock renders incorrect indentation for MDX string children wrapped in {...}.

To Reproduce

1. Render this MDX:

<CodeBlock filename="example.ts" language="ts">
{`import {
  a,
  b,
} from 'pkg';

async function main() {
  console.log('hello');
}`}
</CodeBlock>

2. Open the rendered page.
3. Observe the indentation of the lines inside the code block.

Expected behavior
The code should render with the same indentation as written in the string:

import {
  a,
  b,
} from 'pkg';

async function main() {
  console.log('hello');
}

Screenshots

Device:

• OS: macOS
• Browser: Chrome
• Version: latest

Additional context
Raw code inside <CodeBlock>...</CodeBlock> causes MDX parsing issues, so wrapping the code in {...} is required. The source string indentation is correct, but the rendered output still appears mis-indented.

[restorenode]

@lawreka could you or someone on your team help with this? I would love to use these CodeBlock components in the documentation I'm working on. Thanks :)