fix: find dom node method deprecation

Author: astagi

src/Accordion/AccordionBody.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ElementType, PropsWithChildren, useCallback, useState } from 'react';
+import React, { ElementType, PropsWithChildren, useCallback, useRef, useState } from 'react';
 import { Transition } from 'react-transition-group';
 import type { TransitionProps } from 'react-transition-group/Transition';
 import { TransitionTimeouts, TransitionsKeys } from '../transitions';
@@ -39,43 +39,53 @@ export const AccordionBody = ({
   ...attributes
 }: PropsWithChildren<AccordionBodyProps>) => {
   const [height, setHeight] = useState<null | number>(null);
-
+  const nodeRef = useRef<HTMLElement>(null);
   const onEntering = useCallback(
-    (node: HTMLElement, isAppearing: boolean) => {
-      setHeight(getHeight(node));
-      attributes.onEntering?.(node, isAppearing);
+    (isAppearing: boolean) => {
+      if (nodeRef.current) {
+        setHeight(getHeight(nodeRef.current));
+        attributes.onEntering?.(nodeRef.current, isAppearing);
+      }
     },
     [attributes.onEntering]
   );
   const onEntered = useCallback(
-    (node: HTMLElement, isAppearing: boolean) => {
+    (isAppearing: boolean) => {
       setHeight(null);
-      attributes.onEntered?.(node, isAppearing);
+      if (nodeRef.current) {
+        attributes.onEntered?.(nodeRef.current, isAppearing);
+      }
     },
     [attributes.onEntered]
   );
   const onExit = useCallback(
-    (node: HTMLElement) => {
-      setHeight(getHeight(node));
-      attributes.onExit?.(node);
+    () => {
+      if (nodeRef.current) {
+        setHeight(getHeight(nodeRef.current));
+        attributes.onExit?.(nodeRef.current);
+      }
     },
     [attributes.onExit]
   );
   const onExiting = useCallback(
-    (node: HTMLElement) => {
-      // getting this variable triggers a reflow
-      // @ts-expect-error variabile non usata
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const _unused = node.offsetHeight;
-      setHeight(0);
-      attributes.onExiting?.(node);
+    () => {
+      if (nodeRef.current) {
+        // getting this variable triggers a reflow
+        // @ts-expect-error variabile non usata
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const _unused = nodeRef.current.offsetHeight;
+        setHeight(0);
+        attributes.onExiting?.(nodeRef.current);
+      }
     },
     [attributes.onExiting]
   );
   const onExited = useCallback(
-    (node: HTMLElement) => {
+    () => {
       setHeight(null);
-      attributes.onExited?.(node);
+      if (nodeRef.current) {
+        attributes.onExited?.(nodeRef.current);
+      }
     },
     [attributes.onExited]
   );
@@ -86,14 +96,15 @@ export const AccordionBody = ({
 
   return (
     <Transition
-      {...transitionProps}
+      nodeRef={nodeRef}
       timeout={timeout}
       in={active}
       onEntering={onEntering}
       onEntered={onEntered}
       onExit={onExit}
       onExiting={onExiting}
       onExited={onExited}
+      {...transitionProps}
     >
       {(status) => {
         const transitionClass = getTransitionClass(status);
@@ -102,12 +113,11 @@ export const AccordionBody = ({
         const style = height == null ? null : { height };
 
         return (
-          <Tag className={classes} style={{ ...childProps.style, ...style }} {...childProps}>
+          <Tag className={classes} ref={nodeRef} style={{ ...childProps.style, ...style }} {...childProps}>
             <div className={listClasses}>{children}</div>
           </Tag>
         );
       }}
     </Transition>
   );
 };
-// }