I use useEffect it start working

"use client";
import Image from "next/image";
import modeImg from "@/public/mode.png";
import { useTheme } from "next-themes";
import { debounce, throttling } from "@/lib/utils";
import { useCallback, useEffect, useRef, useState } from "react";
import clsx from "clsx";
export default function Mode({ className }: { className?: string }) {

  const mode = useRef<HTMLDivElement>(null);

  const { theme, setTheme } = useTheme();
  const Click = useCallback(
    debounce(() => {
      setTheme(theme === "light" ? "dark" : "light");
    }, 500),
    [theme, setTheme]
  );
  useEffect(() => {
  
    /*
     * condition class is not working! so use this
     */
    mode.current?.classList.remove(
      theme == "dark" ? "translate-x-0" : "translate-x-[-93%]"
    );
    mode.current?.classList.add(
      theme == "dark" ? "translate-x-[-93%]" : "translate-x-0"
    );
    console.log("hello");
  }, [theme]);
  return (
    <div
      onClick={Click}
      className={clsx(" w-[60px] overflow-hidden", className)}
    >
      <div
        ref={mode}
        style={{
          transitionTimingFunction: "steps(10)",
        }}
        className={`leading-none w-[660px] h-[100%]  block   duration-400 overflow-hidden ease-[steps(10)]  transition-transform`}
      >
        <Image
          className={"leading-[0] block  "}
          alt="mode image"
          src={modeImg}
          width={660}
        />
      </div>
    </div>
  );
}

can i do this without this useEffect can anyone explain what is happening here ? why first code is not working properly?