title: JSON Stringify doesnt format the same into component
body: <p>I have an array that I need to format using JSON Stringify. I am using the Chakra UI  component to display the text but it doesnt show correctly in the component. In the console it is showing how I want it however.
  This is the formatted text:</p>
  <pre><code>[
    {
      &quot;price&quot;: &quot;15.99&quot;,
      &quot;size&quot;: &quot;m&quot;
    },
    {
      &quot;price&quot;: &quot;2.99&quot;,
      &quot;size&quot;: &quot;s&quot;
    }
  ]
  </code></pre>
  <p>This is how I use it in the component:</p>
  <pre><code>&lt;Code children={JSON.stringify(data, null, 2)} /&gt;
  </code></pre>
  <p>But running the app in the component it shows:</p>
  <pre><code>[ { &quot;price&quot;: &quot;15.99&quot;, &quot;size&quot;: &quot;m&quot; }, { &quot;price&quot;: &quot;2.99&quot;, &quot;size&quot;: &quot;s&quot; } ]
  </code></pre>
  <p>With no line breaks. Ive tried wrapping the JSON.stringify term in a <code>p</code> tag but didnt work. Not sure if there is a trick to this or a property in the code css that cuts off the lines</p>