diff --git a/components/lib/stepper/StepperContent.js b/components/lib/stepper/StepperContent.js
index 4e27353998..c0711d47e4 100644
--- a/components/lib/stepper/StepperContent.js
+++ b/components/lib/stepper/StepperContent.js
@@ -2,12 +2,13 @@ import * as React from 'react';
 import { useMergeProps } from '../hooks/Hooks';
 
 export const StepperContent = React.memo(
-    React.forwardRef((props) => {
+    React.forwardRef((props, ref) => {
         const mergeProps = useMergeProps();
         const { cx, ptm } = props;
 
         const rootProps = mergeProps(
             {
+                ref: ref,
                 id: props.id,
                 className: cx('stepper.content', { stepperpanel: props.stepperpanel, index: props.index }),
                 role: 'tabpanel',
diff --git a/components/lib/stepper/StepperHeader.js b/components/lib/stepper/StepperHeader.js
index c3ff1f7128..75b34cbc72 100644
--- a/components/lib/stepper/StepperHeader.js
+++ b/components/lib/stepper/StepperHeader.js
@@ -2,11 +2,12 @@ import * as React from 'react';
 import { useMergeProps } from '../hooks/Hooks';
 
 export const StepperHeader = React.memo(
-    React.forwardRef((props) => {
+    React.forwardRef((props, ref) => {
         const mergeProps = useMergeProps();
         const { cx } = props;
 
         const buttonProps = mergeProps({
+            ref: ref,
             id: props.id,
             className: cx('stepper.action'),
             role: 'tab',
diff --git a/components/lib/stepper/StepperSeparator.js b/components/lib/stepper/StepperSeparator.js
index 0ebc1e4d01..c283198917 100644
--- a/components/lib/stepper/StepperSeparator.js
+++ b/components/lib/stepper/StepperSeparator.js
@@ -2,10 +2,11 @@ import * as React from 'react';
 import { useMergeProps } from '../hooks/Hooks';
 
 export const StepperSeparator = React.memo(
-    React.forwardRef((props) => {
+    React.forwardRef((props, ref) => {
         const mergeProps = useMergeProps();
 
         const separatorProps = mergeProps({
+            ref: ref,
             'aria-hidden': true,
             className: props.separatorClass,
             ...props.getStepPT(props.stepperpanel, 'separator', props.index)
diff --git a/components/lib/stepperpanel/StepperPanel.js b/components/lib/stepperpanel/StepperPanel.js
index cbc39232d4..781b3d1cf5 100644
--- a/components/lib/stepperpanel/StepperPanel.js
+++ b/components/lib/stepperpanel/StepperPanel.js
@@ -1,24 +1,18 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { ObjectUtils } from '../utils/Utils';
 import { StepperPanelBase } from './StepperPanelBase';
 
 export const StepperPanel = React.memo(
     React.forwardRef((inProps, ref) => {
         const context = React.useContext(PrimeReactContext);
         const props = StepperPanelBase.getProps(inProps, context);
-        const elementRef = React.useRef(ref);
         const { isUnstyled } = StepperPanelBase.setMetaData({
             props
         });
 
         useHandleStyle(StepperPanelBase.css.styles, isUnstyled, { name: 'StepperPanel' });
 
-        React.useEffect(() => {
-            ObjectUtils.combinedRefs(elementRef, ref);
-        }, [elementRef, ref]);
-
         return <span ref={ref}>{props.children}</span>;
     })
 );