refactor: change memoization of margins to support the rule of hooks

package.json

@@ -17,7 +17,7 @@
     "check:deps": "pnpm --recursive --parallel exec depcheck",
     "check:format": "prettier . --check",
     "check:lint": "turbo run lint --continue -- --quiet",
-    "check:react-compiler": "eslint --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [warn]' --ignore-path .eslintignore.react-compiler --max-warnings 33 .",
+    "check:react-compiler": "eslint --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [warn]' --ignore-path .eslintignore.react-compiler --max-warnings 32 .",
     "check:test": "run-s test -- --silent",
     "check:types": "tsc && turbo run check:types --filter='./packages/*' --filter='./packages/@sanity/*'",
     "chore:format:fix": "prettier --cache --write .",

packages/sanity/src/core/presence/overlay/RegionsWithIntersections.tsx

@@ -46,13 +46,20 @@ export const RegionsWithIntersections = forwardRef(function RegionsWithIntersect
   props: RegionsWithIntersectionsProps,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const {regions, render, children, margins: marginsProp} = props
+  const {
+    regions,
+    render,
+    children,
+    margins: [mt, mr, mb, ml],
+  } = props
 
   const overlayRef = useRef<HTMLDivElement | null>(null)
 
   // Make sure `margins` is memoized
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const margins = useMemo(() => marginsProp, [JSON.stringify(marginsProp)])
+  const margins = useMemo<[number, number, number, number]>(
+    () => [mt, mr, mb, ml],
+    [mt, mr, mb, ml],
+  )
 
   const io = useMemo(
     () =>