The error appears because the UI that is initially rendered is different from the data-populated UI sent from the server.
So if you want to import a component with dynamic data, try to import like
const ProtectRoute = dynamic(() => import('@/components/ProtectRoute'))
It disables SSR and lets you render new data on API call.
I spent the whole day trying to find the solution and asking for help from other senior developers. Finally I found the solution. 😅
Hope it is useful for you too.
Thanks to this Github issue comment -> github.com/vercel/next.js/discussions/35773..