Estoy usando Next.js para crear una aplicación React y estoy usando redux con redux-toolkit para la administración del estado.

Estoy viendo un error en la consola que dice:
Warning: Did not expect server HTML to contain a <button> in <div> .

He visto esto antes, pero no estoy seguro de por qué sucede esto en este caso particular.
Aquí hay una versión simplificada del componente que tiene este problema:

 const TopNav = (): JSX.Element => { const user = useSelector(selectAuthUser); return ( <> <div>{!user && <LoginNavButton />}</div> </> ); };

Aquí hay una solución que se me ocurrió, pero no estoy seguro de por qué tengo que hacer esto:

 const TopNav = (): JSX.Element => { const user = useSelector(selectAuthUser); const [showButton, setShowButton] = useState<boolean>(false); useEffect(() => { if (!!user) setShowButton(true); }, [user]); return ( <> <div>{showButton && <LoginNavButton />}</div> </> ); };

¿Alguien puede explicar por qué el uso básico de useSelector() y la referencia al estado están causando este problema? Supongo que se debe a que el servidor no tiene acceso al estado, etc. Sin embargo, parece una molestia tener que solucionarlo de esta manera para la funcionalidad básica. Por lo tanto, siento que lo estoy abordando incorrectamente :)