import React from "react";
import { CopyBlock, dracula } from "react-code-blocks";

export default function Codeblocks() {
    return (
        <div style={{ fontFamily: 'IBM Plex Mono' }}>
  <CopyBlock
    text={`function toBe() {
if (Math.random() < 0.5) {
  return true;
} else {
  return false;
}
}`}
    showLineNumbers
    codeBlock
    language="js"
    theme={dracula}
  />
</div>
    );
}

I am trying to use react-code-blocks package in my next.js app, all is running okay but I do not know why it is rendering like this!

How I want it to render

How it is rendered!