diff --git a/packages/mobile-voice/src/hooks/use-color-scheme.web.ts b/packages/mobile-voice/src/hooks/use-color-scheme.web.ts
index 7eb1c1b707..44ee8659f3 100644
--- a/packages/mobile-voice/src/hooks/use-color-scheme.web.ts
+++ b/packages/mobile-voice/src/hooks/use-color-scheme.web.ts
@@ -1,21 +1,29 @@
-import { useEffect, useState } from 'react';
-import { useColorScheme as useRNColorScheme } from 'react-native';
+import { useSyncExternalStore } from "react"
+import { useColorScheme as useRNColorScheme } from "react-native"
+
+function subscribe() {
+  return () => {}
+}
+
+function getSnapshot() {
+  return true
+}
+
+function getServerSnapshot() {
+  return false
+}
 
 /**
  * To support static rendering, this value needs to be re-calculated on the client side for web
  */
 export function useColorScheme() {
-  const [hasHydrated, setHasHydrated] = useState(false);
+  const hasHydrated = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 
-  useEffect(() => {
-    setHasHydrated(true);
-  }, []);
-
-  const colorScheme = useRNColorScheme();
+  const colorScheme = useRNColorScheme()
 
   if (hasHydrated) {
-    return colorScheme;
+    return colorScheme
   }
 
-  return 'light';
+  return "light"
 }