I am using useTheme hook in nextJs to give src attribute to Image component but the problem is it gives this warning and the expected result doesn’t occur:

app-index.js:33 Warning: Prop src did not match. Server: “/_next/static/media/sun.2e8f76a6.svg” Client: “/_next/static/media/moon.0a4f819f.svg”

"use client";

import moon from "public/icons/moon.svg";
import sun from "public/icons/sun.svg";
import Image from "next/image";
import { useTheme } from "next-themes";

function ToggleDarkMode({ className }) {

  const { theme, setTheme } = useTheme();


  return (
      <Image
        src={theme === "light" ? moon : sun}
        alt="moon or sun image"
        width={24}
        height={24}
      />
  );
}

export default ToggleDarkMode;

it could be the icon of moon or sun depend on the theme state but always initialy it shows sun image (else condition)
and it gives the warning :
app-index.js:33 Warning: Prop src did not match. Server: “/_next/static/media/sun.2e8f76a6.svg” Client: “/_next/static/media/moon.0a4f819f.svg”