How to fix "Hydration failed because the initial UI does not match what was rendered on the server" in React 18, Next.js"
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.
Hope it is useful for you too.
Thanks to this Github issue comment -> github.com/vercel/next.js/discussions/35773..