fix: resolve eslint-plugin-react-hooks 7.0.1 linting errors

Fixed ref access violations introduced by upgrading to eslint-plugin-react-hooks 7.0.1:
- Moved ref updates to useEffect in click_outside_wrapper.tsx
- Added ESLint disable comments for Floating UI library usage which legitimately requires refs during render
- Refactored shadow_root.tsx to use state with queueMicrotask to avoid cascading renders

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: martijnrusschen

src/click_outside_wrapper.tsx

@@ -17,7 +17,9 @@ const useDetectClickOutside = (
 ) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const onClickOutsideRef = useRef(onClickOutside);
-  onClickOutsideRef.current = onClickOutside;
+  useEffect(() => {
+    onClickOutsideRef.current = onClickOutside;
+  }, [onClickOutside]);
   const handleClickOutside = useCallback(
     (event: MouseEvent) => {
       const target =

src/popper_component.tsx

@@ -50,6 +50,7 @@ export const PopperComponent: React.FC<PopperComponentProps> = (props) => {
     const classes = clsx("react-datepicker-popper", className);
     popper = (
       <TabLoop enableTabLoop={enableTabLoop}>
+        {/* eslint-disable react-hooks/refs -- Floating UI values are designed to be used during render */}
         <div
           ref={popperProps.refs.setFloating}
           style={popperProps.floatingStyles}
@@ -71,6 +72,7 @@ export const PopperComponent: React.FC<PopperComponentProps> = (props) => {
             />
           )}
         </div>
+        {/* eslint-enable react-hooks/refs */}
       </TabLoop>
     );
   }
@@ -91,6 +93,7 @@ export const PopperComponent: React.FC<PopperComponentProps> = (props) => {
 
   return (
     <>
+      {/* eslint-disable-next-line react-hooks/refs -- Floating UI refs are designed to be used during render */}
       <div ref={popperProps.refs.setReference} className={wrapperClasses}>
         {targetComponent}
       </div>

src/test/helper_components/shadow_root.tsx

@@ -8,26 +8,31 @@ import React, {
 import { createPortal } from "react-dom";
 
 const ShadowRoot: FC<PropsWithChildren> = ({ children }) => {
+  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
+
   const containerRef = useRef<HTMLDivElement>(null);
-  const shadowRootRef = useRef<ShadowRoot>(null);
-  const [isInitialized, setIsInitialized] = useState(false);
+  const isInitializedRef = useRef(false);
 
   useLayoutEffect(() => {
+    if (isInitializedRef.current) {
+      return;
+    }
+
     const container = containerRef.current;
-    if (isInitialized || !container) {
+    if (!container) {
       return;
     }
 
-    shadowRootRef.current =
+    const root =
       container.shadowRoot ?? container.attachShadow({ mode: "open" });
-    setIsInitialized(true);
-  }, [isInitialized]);
+    isInitializedRef.current = true;
+    // Use queueMicrotask to defer setState to avoid cascading renders
+    queueMicrotask(() => setShadowRoot(root));
+  }, []);
 
   return (
     <div ref={containerRef}>
-      {isInitialized &&
-        shadowRootRef.current &&
-        createPortal(children, shadowRootRef.current)}
+      {shadowRoot && createPortal(children, shadowRoot)}
     </div>
   );
 };

src/with_floating.tsx

@@ -56,6 +56,7 @@ export default function withFloating<T extends FloatingProps>(
       middleware: [
         flip({ padding: 15 }),
         offset(10),
+        // eslint-disable-next-line react-hooks/refs -- Floating UI requires refs to be passed during render
         arrow({ element: arrowRef }),
         ...(props.popperModifiers ?? []),
       ],