Can Highlght.JS read \r\n or \r as line break in object value?

Question

I am using highlight.js to display JSON data in my react application.

Some JSON data are working fine. here is the example :

But I have some JSON that contains a function that has \r\n and it seems that this \r\n does not want to go. For example:

here is my code

import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
import json from 'highlight.js/lib/languages/json'
/* eslint-disable */
hljs.registerLanguage('json', json)
hljs.highlightAll()
/* eslint-enable */
interface Prop {
  code: string
  setIsFormulaEditable: () => void
}
export function ShowFormula(props: Prop): JSX.Element {
  return (
    <pre onClick={() => props.setIsFormulaEditable()}>
      <code className="json">{props.code}</code> // I have this parsed and stringified when passing it as props
    </pre>
  )
}

is it possible to remove this \r\n and replace it with a line break?