I have problem ,because i have two components with header and i would like to render conditional ,so I cant using media-query in style ,because it is always be in site structure . I tried using useMediaQuery ,but if i set that ,i have problem with hydration ,I solved this problem with useEffect.. Now I have problem with flashing my header. Maybe someone have solution for that?

const MainHeader = props => {
    const { data: session, status } = useSession();

    const isMediumScreen = useMediaQuery({
        query: "(min-width: 768px)",
    });
    const [isClient, setIsClient] = useState(false);

    useEffect(() => {
        setIsClient(true);
    }, []);

    // const classesHeader = !isLoading
    //     ? `${styles.header}`
    //     : `${styles.header} ${styles.loading}`;
    const classesHeader = `${styles.header} ${props.className}`;

    return (
        <>
            {isMediumScreen && isClient && (
                <header className={classesHeader}>
                    <Logo className={styles["header__logo"]} />
                    <NavbarDesktop className={styles["header__nav"]} />
                    {session && (
                        <Image
                            src='/images/header/alpaca.png'
                            height={75}
                            width={75}
                            alt='Lama'
                            className={styles["header__avatar"]}
                        />
                    )}
                </header>
            )}
        </>
    );
};

export default MainHeader;