I'm using Next.js to create a React app, and I'm using redux with redux-toolkit for state management.

I'm seeing an error in the console stating:
Warning: Did not expect server HTML to contain a <button> in <div>.

I've seen this before, but I'm unsure why this is happening in this particular case.
Here is a simplified version of the component which has this issue:

const TopNav = (): JSX.Element => {
    const user = useSelector(selectAuthUser);

    return (
        <>
            <div>{!user && <LoginNavButton />}</div>
        </>
    );
};

Here is a workaround I've come up with, but I'm not sure why I have to do this:

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>
        </>
    );
};

Can anyone explain why the basic usage of useSelector() and referring to state is causing this issue? I'm assuming it's because the server doesn't have access to state, etc. however it seems like a pain to have to work around it like this for basic functionality. Hence, I feel like I'm approaching it incorrectly :)