[fix]: add-listner is deprecated, switched those to add-event-listner (#4093)

beta/src/components/Layout/useMediaQuery.tsx

@@ -17,14 +17,14 @@ const useMediaQuery = (width: number) => {
 
   useEffect(() => {
     const media = window.matchMedia(`(max-width: ${width}px)`);
-    media.addListener(updateTarget);
+    media.addEventListener('change', updateTarget);
 
     // Check on mount (callback is not called until a change occurs)
     if (media.matches) {
       setTargetReached(true);
     }
 
-    return () => media.removeListener(updateTarget);
+    return () => media.removeEventListener('change', updateTarget);
   }, [updateTarget, width]);
 
   return targetReached;

beta/src/pages/_document.tsx

@@ -46,7 +46,7 @@ class MyDocument extends Document {
                   }
                   setTheme(initialTheme);
 
-                  darkQuery.addListener(function (e) {
+                  darkQuery.addEventListener('change', function (e) {
                     if (!preferredTheme) {
                       setTheme(e.matches ? 'dark' : 'light');
                     }