Recibo tres errores debido a la declaración if en mi archivo _app.js.

 Error: Hydration failed because the initial UI does not match what was rendered on the server. Error: Hydration failed because the initial UI does not match what was rendered on the server. Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

¿Cuál es la causa del error y cómo lo soluciono?

 import '../styles/globals.css' import Popup from "../components/register-popup.js"; import { getCookies, setCookies, removeCookies } from 'cookies-next'; var isValid = getCookies("noPopup").noPopup != "valid"; function MyApp({ Component, pageProps }) { if (isValid) { return ( <div> <Popup /> </div> ) } else { return ( <div> <Component {...pageProps} /> </div> ) } } export default MyApp