Diagnose and fix a Next.js hydration mismatch error

I'm getting a Next.js hydration mismatch error. Help me find and fix the actual cause, not just suppress the warning.

Error message: [paste the exact error/warning text from the console]

Relevant code:
[paste the component(s) involved — include any that use Date, Math.random, window/document, localStorage, or conditionally render based on browser-only state]

Context: Next.js [version], App Router or Pages Router: [specify], rendering mode: [server component / client component / getServerSideProps, etc.]

Please:
1. Identify the specific source of non-determinism between server and client render — common causes are: use of Date/Math.random directly in render, reading window/localStorage/navigator during render, browser extensions injecting DOM, conditionally rendering based on typeof window, or mismatched data between server fetch and client fetch
2. Explain exactly why this particular code produces different output on server vs. client
3. Propose the correct fix for the actual cause — e.g. moving browser-only reads into useEffect, using a mounted-state guard, or making the value deterministic (like passing a server-generated timestamp as a prop instead of calling Date.now() in two places)
4. Do NOT propose suppressHydrationWarning as the fix unless the mismatch is truly unavoidable and cosmetic (e.g. a browser extension modifying the DOM) — if that's the case, say so explicitly and explain why
5. Show the corrected code
6. Suggest how to verify the fix (what to check in dev tools, and whether to test with JavaScript disabled to compare initial HTML)