Реагировать на изменение состояния пользовательского хука, не вызывая повторного рендеринга

Я создал собственный реагирующий хук, который позволяет пользователям переключать цветовую тему моего приложения (т. е. «светлая» или «темная»), и изменение состояния не приводит к повторному рендерингу компонентов, вызывающих хук.

Крючок называется useColorTheme и определяется следующим образом:

import { useEffect } from "react";
import useLocalStorage from "./useLocalStorage";

export default function useColorTheme() {
  const [colorTheme, setColorTheme] = useLocalStorage("color-theme", "light");

  useEffect(() => {
    const className = "dark";
    const bodyClass = window.document.body.classList;

    colorTheme === "dark"
      ? bodyClass.add(className)
      : bodyClass.remove(className);
  }, [colorTheme]);

  return [colorTheme, setColorTheme];
}

Как видите, этот хук вызывает другой хук под названием useLocalStorage, который позволяет сохранять состояние при обновлении.

Я получил этот хук от usehooks.com, и он определяется как:

import { useState } from "react";

const PREFIX = "my-app-";

export default function useLocalStorage(key: string, initialValue: string) {
  const prefixedKey = PREFIX + key;
  const [storedValue, setStoredValue] = useState(() => {
    if (typeof window === "undefined") {
      return initialValue;
    }

    try {
      const item = window.localStorage.getItem(prefixedKey);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.info(error);
      return initialValue;
    }
  });

  function setValue(value: unknown) {
    try {
      /**
       * Don't fully understand function typing here
       */
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      if (typeof window !== "undefined") {
        window.localStorage.setItem(prefixedKey, JSON.stringify(valueToStore));
      }
    } catch (error) {
      console.info(error);
    }
  }

  return [storedValue, setValue];
}

Значение colorTheme успешно сохраняется в localStorage, и хук работает при начальной загрузке приложения, но у меня возникают проблемы с компонентами, которые вызывают useColorTheme хук, как в этом DrawerContainer примере:

export default function DrawerContainer() {

  // calling the hook
  const [theme, setTheme] = useColorTheme();

  // component does not re-render when ThemeToggle component toggles theme state

  return (
    <div className = "flex items-center justify-between gap-2">
      <FiMenu size = {30} className = "lg:hidden mr-4 cursor-pointer" />
      <Image
        className = "ml-10 mr-10 sm:mr-2 sm:ml-0 cursor-pointer"
        src = {
          theme === "light"
            ? "/images/fiverr-logo.png"
            : "/images/fiverr-logo-white.png"
        }
        alt = "logo"
        width = {100}
        height = {100}
      />
      {!user && <AuthButtons showUnderSmall />}
      <ThemeToggle />
    </div>
  );
}

Когда значение colorTheme переключается в каком-либо другом компоненте моего приложения (например, в моем компоненте ThemeToggle), измененное состояние не фиксируется в моем компоненте DrawerContainer, что предотвращает выполнение логики, считывающей это состояние.

Я убедился, что состояние действительно меняется в моем браузере Dev Tools, так почему мой компонент DrawerContainer не перерисовывается?

Заранее большое спасибо. Любое понимание очень ценится.