Hydration Error in Google Chrome but not in Microsoft Edge (Error Resolved After Refresh)

I encountered a hydration error when using Google Chrome to view the project, but the error does not appear in Microsoft Edge. The error message indicates a mismatch between the initial UI rendered on the server and the UI hydrated on the client.In Google Chrome, after refreshing the page once, the error disappears, and the application works normally. This behavior is consistent: the initial load in Chrome throws the error, but after a refresh, the app functions correctly without further issues. The full error message is: Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error Possible Cause: This issue could be related to browser-specific differences in how hydration is handled or discrepancies between the server-rendered and client-rendered content. It may involve dynamic content or conditional rendering that behaves differently across browsers.