How to use disqus-react on a NextJS 13 Project

Question

I'm using https://www.npmjs.com/package/disqus-react on my NextJS Project. My main problem is that my comment on a particular blog post appears on all posts.

For example, I have created sample blog posts below:

1. Blog Post 1
2. Blog Post 2
3. Blog Post 3

Now, when I comment on "Blog Post 1," then I visit "Blog Post 2" and "Blog Post 3," I see the same comment I added to the "Blog Post 1."

Here's my DisqusCommentBlock component.

"use client"
import { DiscussionEmbed } from 'disqus-react';
import React from 'react';

interface DisqusCommentBlockProps {
  shortname?: string;
  config?: {
    url?: string;
    identifier?: string;
    title?: string;
    language?: string;
  }
}

const DisqusCommentBlock: React.FC<DisqusCommentBlockProps> = ({ shortname, config }) => { 
  return (
    <div>
      <DiscussionEmbed
        shortname={shortname}
        config={{
          url: config.url,
          identifier: config.identifier,
          title: config.title,
          language: config.language || 'en_EN' 
        }}
    />
    </div>
  )
}

export default DisqusCommentBlock;

And here's my implementation:

    <Disqus
        shortname="novice_programmer"
        config={{
          url: process.env.SITE_URL + 'blog/' + slug,
          identifier: blogPost.identifier,
          title: blogPost.title,
          language: 'en' 
        }}
    />

What could be the problem here? Any ideas?

Edit:

I was able to solve it by setting the value of the identifier to the "slug."

<Disqus
    shortname="novice_programmer"
    config={{
      url: process.env.SITE_URL + 'blog/' + slug,
      identifier: slug,
      title: blogPost.title,
      language: 'en' 
    }}
/>