I don't like approach bellow as it makes logo blink whenever I switch theme - due to not being mounted immedieatly.

But if I remove mounted logo goes to darkmode automaticlly when i refresh no matter theme i select, after refresh it always does the same thing. It works when switching themes but not after refreshing.

"use client";
import { useTheme } from "next-themes";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";

const Logo = () => {
  const { theme } = useTheme();
  const [mounted, setMounted] = useState(false);

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

  return (
    <div className="h-10 overflow-hidden">
      <Link href="/">
        {mounted && (
          <Image
            src={
              theme === "dark"
                ? "/vector/logo-light.svg"
                : "/vector/logo-dark.svg"
            }
            alt="Venya"
            width={100}
            height={30}
            priority
            className="h-auto w-auto"
          />
        )}
      </Link>
    </div>
  );
};

export default Logo;