diff --git a/components/lib/card/Card.js b/components/lib/card/Card.js
index 92f93259b4..e374b4aa51 100644
--- a/components/lib/card/Card.js
+++ b/components/lib/card/Card.js
@@ -3,7 +3,7 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Card = React.forwardRef((props, ref) => {
 
-    const elementRef = useRef(ref);
+    const elementRef = React.useRef(ref);
 
     const createHeader = () => {
         if (props.header) {
@@ -29,15 +29,15 @@ export const Card = React.forwardRef((props, ref) => {
         )
     }
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const otherProps = ObjectUtils.findDiffKeys(props, Card.defaultProps);
     const className = classNames('p-card p-component', props.className);
     const header = createHeader();
     const body = createBody();
 
-    useEffect(() => {
-        ObjectUtils.combinedRefs(elementRef, ref);
-    }, [elementRef, ref]);
-
     return (
         <div id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps}>
             {header}
diff --git a/components/lib/panel/Panel.js b/components/lib/panel/Panel.js
index dc421b6251..64d82f87cf 100644
--- a/components/lib/panel/Panel.js
+++ b/components/lib/panel/Panel.js
@@ -7,7 +7,7 @@ import { classNames, IconUtils, ObjectUtils, UniqueComponentId } from '../utils/
 export const Panel = React.forwardRef((props, ref) => {
     const [idState, setIdState] = React.useState(props.id);
     const [collapsedState, setCollapsedState] = React.useState(props.collapsed);
-    const elementRef = useRef(ref);
+    const elementRef = React.useRef(ref);
     const contentRef = React.useRef(null);
     const collapsed = props.toggleable ? (props.onToggle ? props.collapsed : collapsedState) : false;
     const headerId = idState + '_header';
@@ -44,7 +44,7 @@ export const Panel = React.forwardRef((props, ref) => {
         props.onCollapse && props.onCollapse(event);
     }
 
-    useEffect(() => {
+    React.useEffect(() => {
         ObjectUtils.combinedRefs(elementRef, ref);
     }, [elementRef, ref]);