fix: revert and update useLocaleDirection usage

Author: TylerAPfledderer

src/components/ThemeProvider.tsx

@@ -3,6 +3,8 @@ import type { ThemeProviderProps } from "next-themes/dist/types"
 
 import { COLOR_MODE_STORAGE_KEY } from "@/lib/constants"
 
+import { useLocaleDirection } from "@/hooks/useLocaleDirection"
+
 /**
  * Primary theming wrapper for use with color mode. Uses the theme provider
  * from `next-themes`.
@@ -11,6 +13,8 @@ import { COLOR_MODE_STORAGE_KEY } from "@/lib/constants"
  * primary decorator to Storybook.
  */
 const ThemeProvider = ({ children }: Pick<ThemeProviderProps, "children">) => {
+  useLocaleDirection()
+
   return (
     <NextThemesProvider
       attribute="data-theme"

src/hooks/useLocaleDirection.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react"
+import { useEffect } from "react"
 import { useRouter } from "next/router"
 
 import { Lang } from "@/lib/types"
@@ -9,15 +9,11 @@ import { isLangRightToLeft } from "@/lib/utils/translations"
  * Custom hook that sets the DOM direction based on the locale,
  * responding to changes in the locale without requiring refresh.
  */
-export const useLocaleDirection = (): string => {
-  const [direction, setDirection] = useState<"ltr" | "rtl">("ltr")
+export const useLocaleDirection = () => {
   const { locale } = useRouter()
 
   useEffect(() => {
     const dir = isLangRightToLeft(locale as Lang) ? "rtl" : "ltr"
     document.documentElement.setAttribute("dir", dir)
-    setDirection(dir)
   }, [locale])
-
-  return direction
 }