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..