fixed grid

src/components/grid/Grid.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import Grid2 from "@mui/material/Unstable_Grid2";
-import { PropTypes } from "prop-types";
+import PropTypes from "prop-types";
 import { styled } from "@mui/material/styles";
 import Button from "@mui/material/Button";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@@ -23,8 +23,17 @@ const ToggleButton = styled(Button)({
   zIndex: 100,
 });
 
-const StyledGrid = styled(Grid2)(
-  ({ theme, isDashboard, isPolicy, isLocked, isExpanded }) => ({
+const StyledGrid = styled(Grid2, {
+  shouldForwardProp: (prop) =>
+    !["isDashboard", "isPolicy", "isLocked", "isExpanded"].includes(prop),
+})(
+  ({
+    theme,
+    isDashboard = false,
+    isPolicy = false,
+    isLocked = false,
+    isExpanded = false,
+  }) => ({
     ...(isDashboard
       ? {
           position: "relative",
@@ -47,9 +56,7 @@ const StyledGrid = styled(Grid2)(
       : isPolicy && {
           padding: "10px",
           color: "#727272",
-          borderStyle: "solid",
-          borderColor: "#B0B0B0",
-          borderWidth: "1px",
+          border: "1px solid #B0B0B0",
           borderRadius: "8px",
           width: "270px",
           background: isLocked ? "#EAEFFF" : "white",
@@ -64,7 +71,14 @@ const StyledGrid = styled(Grid2)(
 );
 
 export const Grid = (props) => {
-  const { children, isDashboard, isPolicy, ...rest } = props;
+  const {
+    children,
+    isDashboard = false,
+    isPolicy = false,
+    isLocked = false,
+    ...rest
+  } = props;
+
   const [isExpanded, setIsExpanded] = useState(false);
   const [showToggle, setShowToggle] = useState(false);
   const [isFirstRender, setIsFirstRender] = useState(true);
@@ -77,36 +91,43 @@ export const Grid = (props) => {
     }
   }, [children, isPolicy]);
 
-  setTimeout(() => {
-    setIsFirstRender(false);
-  }, 3000);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsFirstRender(false);
+    }, 3000);
 
-  const toggleExpand = () => {
-    setIsExpanded(!isExpanded);
-  };
+    return () => clearTimeout(timer);
+  }, []);
 
   useEffect(() => {
-    if (contentRef.current) {
-      const contentHeight = contentRef.current.scrollHeight;
-      if (contentHeight > 120) {
-        if (!isFirstRender) {
-          setIsExpanded(true);
-        }
-      } else {
-        setIsExpanded(false);
+    if (!contentRef.current) return;
+
+    const contentHeight = contentRef.current.scrollHeight;
+
+    if (contentHeight > 120) {
+      if (!isFirstRender) {
+        setIsExpanded(true);
       }
+    } else {
+      setIsExpanded(false);
     }
-  }, [contentRef?.current?.scrollHeight]);
+  }, [children, isFirstRender]);
+
+  const toggleExpand = () => {
+    setIsExpanded((prev) => !prev);
+  };
 
   return (
     <StyledGrid
+      ref={contentRef}
       isDashboard={isDashboard}
       isPolicy={isPolicy}
+      isLocked={isLocked}
       isExpanded={isExpanded}
-      ref={contentRef}
       {...rest}
     >
       {children}
+
       {isPolicy && showToggle && (
         <ToggleButton onClick={toggleExpand}>
           {isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
@@ -122,9 +143,3 @@ Grid.propTypes = {
   isPolicy: PropTypes.bool,
   isLocked: PropTypes.bool,
 };
-
-Grid.defaultProps = {
-  isDashboard: false,
-  isPolicy: false,
-  isLocked: false,
-};