Getting `DYNAMIC_SERVER_USAGE` when importing dynamic component with ssr false in NextJs AppDir

Question

I am getting the following error while importing a component dynamically with ssr turned off in NextJs 13 AppDir:

Code of the component being imported is as follows:

"use client";

import { useTheme } from "next-themes";

import { HiMoon, HiSun } from "react-icons/hi";

const NavbarTheme = () => {
  const { theme, setTheme } = useTheme();

  return (
    <div className="flex items-center justify-center rounded-full text-[color:var(--primary-1)]">
      {theme === "dark" ? (
        <HiSun
          title="light"
          className="text-[32px]"
          onClick={() => setTheme("light")}
        />
      ) : (
        <HiMoon
          title="dark"
          className="text-[32px]"
          onClick={() => setTheme("dark")}
        />
      )}
    </div>
  );
};

export default NavbarTheme;

Code is being imported in this file

"use client";

import dynamic from "next/dynamic";

import { useEffect, useState } from "react";

import { AiOutlineLoading3Quarters } from "react-icons/ai";

import { MainNavWrapper } from "./navbar-static";

import styles from "../styles.module.css";

const NavbarTheme = dynamic(() => import("./navbar-theme"), {
  ssr: false,
  loading: () => (
    <div className="flex justify-center items-center">
      <AiOutlineLoading3Quarters className="animate-spin text-[28px] text-[color:var(--primary-1)]" />
    </div>
  ),
});

const NavbarAction = () => {
  const scrollChangeProp = 20;
  const [scrollPosition, setScrollPosition] = useState(0);
  const handleScroll = () => {
    const position = window.scrollY;
    setScrollPosition(position);
  };

  useEffect(() => {
    if (window.scrollY > scrollChangeProp) setScrollPosition(window.scrollY);
  }, []);

  useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true });

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <header
      className={`w-full fixed text-[color:var(--primary-1)] h-[80px] flex justify-center items-center py-[10px] max-md:h-[80px] max-md:flex-col z-[10000] max-md:justify-start ${
        scrollPosition > scrollChangeProp
          ? styles.changeNaVBg
          : styles.removeNaVBg
      }`}
    >
      <MainNavWrapper>
        <div className="flex items-center gap-2">
         {/* ... */}
          <div className="cursor-pointer">
            <NavbarTheme />
          </div>
        </div>
      </MainNavWrapper>
      {/* ... */}
    </header>
  );
};

export default NavbarAction;

I tried removing this component and app worked fine without any error. When not using {ssr: false} it gives hydration error.