How to make React SyntaxHighlighter display multiple lines

I'm trying to pass a string of markup into the highlighter but its only displaying it on a single line. I want it to look exactly like the markup I'm passing in.

How I'm passing the string into the child component

 <Showcase 
   class="w-full p-4 text-center m-auto space-x-2" 
   component={
          <>
            <Button variant="primary" text="Disabled Button" disabled />
            <Button variant="secondary" text="Disabled Button" disabled />
          </>
   } 
   syntaxBlock='
          <Button variant="primary" text="Disabled Button" disabled />
          <Button variant="secondary" text="Disabled Button" disabled />
   '
   title="Disabled" 
/>

The code block that renders the highlighter

<SyntaxHighlighter wrapLines={true} language="javascript" style={a11yDark} showLineNumbers>
  {props.syntaxBlock}
</SyntaxHighlighter>