Prime React & Next.js hydration warning issue [SOLVED]

Question

My Simple Set Up

I am in the process of practicing with nextjs and just made a brand-new app with the latest next.js (v14) which is working nicely. The UI library that I've enjoyed using is Prime React so after I made sure everything was working nicely I installed the latest Prime React(10.5). (I have no other libraries installed)

Links to codesandbox and github are below in the question section

Issue

When using Prime React components such as <Button/> or <Sidebar/> everything is working perfectly and looks nice but...

When inspecting the page on any browser and opening the console I consistently get this warning:

Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:182:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:114:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:538:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:129:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:145:11)

What I've Tried

1. I've seen some nextjs potential solutions to this by adding <React.Fragment> around the components where this is used but it does not fix the warning
2. To make sure this is only happening because of prime react I have done extensive testing and have made a sandbox where it only has prime react and nextjs (no other modules or libs etc) and it is only happening because of prime react components
3. I've tried adding Prime React Provider but this does not solve anything
4. I've tried disabling all chrome extensions but this did not affect the warning

Question

Does anyone know how to solve this issue? Or if anyone else has successfully used Next.js(14) and PrimeReact(10.5) together with no warnings, what steps have you taken to remove or satisfy this issue?

Here is a link to my git repo: Github Link to the specific branch
Here is a link to my sandbox: CodeSandbox.io Link

Thank you for any help in advance...I know that everything works fine with the warning but I like to have no errors and no warnings in my code just in-case it could cause an issue down the line

Answer 1

This is caused by the Grammarly chrome extension

Disabling this was not enough, after I fully uninstalled Grammarly I no longer received the issue and found that it was because Grammarly adds props/attributes to the body tag.

If this is happening to you make sure you completely remove Grammarly and related extensions to solve it.

Special thanks to Snehil Shah for helping me figure this out