refactor(SLB-405): enhance reduced motion detection

packages/ui/src/components/Molecules/FadeUp.tsx

@@ -1,13 +1,32 @@
 'use client';
-import { motion, useReducedMotion } from 'framer-motion';
-import React, { PropsWithChildren } from 'react';
+import { motion } from 'framer-motion';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 
 export function FadeUp({
   yGap,
   children,
   className,
 }: PropsWithChildren<{ yGap: number; className?: string }>) {
-  const reducedMotion = useReducedMotion();
+  const [reducedMotion, setReducedMotion] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+    const handleChange = () => {
+      setReducedMotion(mediaQuery.matches);
+    };
+
+    // Set the initial value
+    handleChange();
+
+    // Add the event listener
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      // Clean up the event listener on unmount
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [reducedMotion]);
 
   return (
     <motion.div