useSize hook for Accordion on small screens

src/app/hooks/Size.tsx

@@ -0,0 +1,30 @@
+import React, { ForwardedRef, ReactNode, forwardRef, useEffect, useLayoutEffect, useRef, useState } from "react";
+
+export default function useSize() {
+    const areaRef = useRef<HTMLDivElement>(null)
+    const [size, setSize] = useState({ width: 0, height: 0 })
+    
+    function SizeWrapper(props: {children: ReactNode }) {
+        return (
+            <div ref={areaRef}>{props.children}</div>
+        )
+    }
+      
+    useEffect(() => {
+        function updateSize() {
+            if (areaRef.current) {
+                setSize({
+                    width: areaRef.current.offsetWidth,
+                    height: areaRef.current.offsetHeight
+                    })
+            }
+        }
+        updateSize()
+        addEventListener("resize", updateSize);
+        return () => {
+            removeEventListener("resize", updateSize)
+        };
+    }, [areaRef, setSize])
+
+    return {SizeWrapper, size}
+}