how to insert dynamic html in the page?

[distant sandal]

i'm trying to make it work with parser from html-react-parser module but what i'm getting the error:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <p> in <p>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

i'm using getServerSideProps in this page since i read stuff from database into the component. my code goes as following: https://pastebin.com/4JTsXk3N and the component that uses parser: https://pastebin.com/WWXCnDAr where article.contents hold a string with the HTML

[glossy wraith]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)