Text inside <pre> in custom component is stripped out of newline characters

[glothriel]

I'm bashing my head against docusaurus. Basically I'd like to build a form where you enter some inputs and below it renders a <pre>/<CodeBlock> with YAML file, that contains template + the data from the inputs (and harder part - I'd like to expose some components that make doing stuff like this easier, as non-fronted devs will be writing the docs). I think I have a problem with how <pre> tags behave when used from within a component.

export const TestSnippet = () => {
  return (
    <pre>
        Roses are red
        violets are blue
        lines should be preformatted 
        wish they'd follow through
    </pre>
  )
};

<TestSnippet/>

<pre>
Roses are red
violets are blue
lines should be preformatted 
wish they'd follow through
</pre>

You can paste it in the playground and see, that the <pre> embedded directly has the new line characters, whereas the <pre> used from within the component has the newline characters stripped.

What should I do here? Is wrapping it like {`<pre>...</pre>`} the only solution? If so i cannot use the props passed from the dynamic inputs to render the values like I'd like to, not mentioning the UX for documentation writers is even worse.

[wooorm]

What you see for the regular pre is how mdx interleaves: nicely. You can put nlthings in it. It follows markdown

What you see with the early pre is how javascript and jsx work. Those braces enter javascript. Theres no markdown in there. If you'd use js(x) in TS or Babel or Esbuild or whatever, it'll be the exact same.
So: how do you solve this in js(x)? With {'\n'}.