How to Parse syntax Highlighting In react I'm using tiptap, lowlight js (for syntax highlighting), react-html-parser)

Question

My code

 <DefaultBlogLayout imgSeo={thumbnail} title={title} desc={meta}>
      {thumbnail ? (
        <div className='relative aspect-video'>
          <Image
            src={thumbnail}
            alt={title}
            fill
            style={{ objectFit: 'cover' }}
          />
        </div>
      ) : null}

      <div className='flex items-center justify-between py-2'>
        {tags.map((t, i) => (
          <span key={i}>#{t}</span>
        ))}

        <span>{getFullDate(createdAt)}</span>
        <span>{getDateDistance(createdAt)}</span>
      </div>

      <div className='prose pros-lg max-w-full mx-auto'>
        <h1>{title}</h1>
        {parse(content)}
      </div>
    </DefaultBlogLayout>

I want to parse content that includes syntax highlighting using Tiptap.js and Lowlight.js. The content looks like this

content : <pre><code>const a = () =&gt;{\r\n return a\r\n}</code></pre>

It worked using the TITAP plugin on the admin page, but when I tried using it with React-HTML-Parser on the blog page, it didn't work." I follow this tutorial https://tiptap.dev/examples/syntax-highlighting