diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
index 23340a327a..95142fd559 100644
--- a/components/lib/autocomplete/AutoComplete.js
+++ b/components/lib/autocomplete/AutoComplete.js
@@ -13,7 +13,7 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
     const [searchingState, setSearchingState] = React.useState(false);
     const [focusedState, setFocusedState] = React.useState(false);
     const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const overlayRef = React.useRef(null);
     const inputRef = React.useRef(props.inputRef);
     const multiContainerRef = React.useRef(null);
@@ -422,6 +422,10 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useMountEffect(() => {
         if (!idState) {
             setIdState(UniqueComponentId());
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 47100ebfa6..ab9fb96fbf 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -12,7 +12,7 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
     const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
     const [viewDateState, setViewDateState] = React.useState(null);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const overlayRef = React.useRef(null);
     const inputRef = React.useRef(props.inputRef);
     const navigation = React.useRef(null);
@@ -2380,6 +2380,10 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useMountEffect(() => {
         let viewDate = getViewDate(props.viewDate);
         validateDate(viewDate);
diff --git a/components/lib/captcha/Captcha.js b/components/lib/captcha/Captcha.js
index b3a9876f05..07f939c464 100644
--- a/components/lib/captcha/Captcha.js
+++ b/components/lib/captcha/Captcha.js
@@ -3,7 +3,7 @@ import { useMountEffect, useUnmountEffect } from '../hooks/Hooks';
 import { ObjectUtils } from '../utils/Utils';
 
 export const Captcha = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const instance = React.useRef(null);
     const recaptchaScript = React.useRef(null);
     const isCaptchaLoaded = React.useRef(false);
@@ -85,6 +85,10 @@ export const Captcha = React.memo(React.forwardRef((props, ref) => {
         getResponse
     }));
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const otherProps = ObjectUtils.findDiffKeys(props, Captcha.defaultProps);
 
     return <div ref={elementRef} id={props.id} {...otherProps}></div>
diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
index 982436d8d4..bb211f7e54 100644
--- a/components/lib/carousel/Carousel.js
+++ b/components/lib/carousel/Carousel.js
@@ -25,7 +25,7 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
     const [numScrollState, setNumScrollState] = React.useState(props.numScroll);
     const [totalShiftedItemsState, setTotalShiftedItemsState] = React.useState((props.page * props.numScroll) * -1);
     const [pageState, setPageState] = React.useState(props.page);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const itemsContainerRef = React.useRef(null);
     const remainingItems = React.useRef(0);
     const allowAutoplay = React.useRef(!!props.autoplayInterval);
@@ -382,6 +382,10 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
             stopAutoplay();
         }
     });
+ 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
 
     const createItems = () => {
         if (props.value && props.value.length) {
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
index e3848ceaa5..848c237fab 100644
--- a/components/lib/cascadeselect/CascadeSelect.js
+++ b/components/lib/cascadeselect/CascadeSelect.js
@@ -10,7 +10,7 @@ import { CascadeSelectSub } from './CascadeSelectSub';
 export const CascadeSelect = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
     const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const overlayRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const labelRef = React.useRef(null);
@@ -186,6 +186,10 @@ export const CascadeSelect = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useUpdateEffect(() => {
         updateSelectionPath();
     }, [props.value]);
diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
index 1b92ddb58d..f90860dcf0 100644
--- a/components/lib/checkbox/Checkbox.js
+++ b/components/lib/checkbox/Checkbox.js
@@ -5,7 +5,7 @@ import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const Checkbox = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const inputRef = React.useRef(props.inputRef);
 
     const onClick = (event) => {
@@ -49,6 +49,10 @@ export const Checkbox = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useUpdateEffect(() => {
         inputRef.current.checked = isChecked();
     }, [props.checked, props.trueValue]);
diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
index 5ca55b3279..653daf5300 100644
--- a/components/lib/chips/Chips.js
+++ b/components/lib/chips/Chips.js
@@ -5,7 +5,7 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Chips = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const listRef = React.useRef(null);
     const inputRef = React.useRef(props.inputRef);
 
@@ -173,6 +173,10 @@ export const Chips = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const createRemoveIcon = (value, index) => {
         if (!props.disabled && !props.readOnly && isRemovable(value, index)) {
             return <span className="p-chips-token-icon pi pi-times-circle" onClick={(event) => removeItem(event, index)}></span>
diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js
index 0b0e74978c..9529a739ff 100644
--- a/components/lib/colorpicker/ColorPicker.js
+++ b/components/lib/colorpicker/ColorPicker.js
@@ -8,7 +8,7 @@ import { ColorPickerPanel } from './ColorPickerPanel';
 
 export const ColorPicker = React.memo(React.forwardRef((props, ref) => {
     const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const overlayRef = React.useRef(null);
     const inputRef = React.useRef(props.inputRef);
     const colorSelectorRef = React.useRef(null);
@@ -441,6 +441,10 @@ export const ColorPicker = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useMountEffect(() => {
         updateHSBValue(props.value);
         updateUI();
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index 30438d6909..57a3b0fd65 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -10,7 +10,7 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {
     const [filterState, setFilterState] = React.useState('');
     const [focusedState, setFocusedState] = React.useState(false);
     const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const overlayRef = React.useRef(null);
     const inputRef = React.useRef(props.inputRef);
     const focusInputRef = React.useRef(null);
@@ -546,6 +546,10 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useMountEffect(() => {
         if (props.autoFocus && focusInputRef.current) {
             focusInputRef.current.focus();
diff --git a/components/lib/fullcalendar/FullCalendar.js b/components/lib/fullcalendar/FullCalendar.js
index ad3c1584f1..c71f759507 100644
--- a/components/lib/fullcalendar/FullCalendar.js
+++ b/components/lib/fullcalendar/FullCalendar.js
@@ -3,7 +3,7 @@ import { useMountEffect, usePrevious, useUnmountEffect, useUpdateEffect } from '
 import { ObjectUtils } from '../utils/Utils';
 
 export const FullCalendar = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const config = React.useRef({});
     const calendar = React.useRef(null);
     const prevEvents = usePrevious(props.events);
@@ -66,6 +66,10 @@ export const FullCalendar = React.memo(React.forwardRef((props, ref) => {
         }
     });
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const otherProps = ObjectUtils.findDiffKeys(props, FullCalendar.defaultProps);
 
     return <div ref={elementRef} id={props.id} style={props.style} className={props.className} {...otherProps}></div>
diff --git a/components/lib/galleria/Galleria.js b/components/lib/galleria/Galleria.js
index 979a601fad..78de7b85ee 100644
--- a/components/lib/galleria/Galleria.js
+++ b/components/lib/galleria/Galleria.js
@@ -13,7 +13,7 @@ export const Galleria = React.memo(React.forwardRef((props, ref) => {
     const [numVisibleState, setNumVisibleState] = React.useState(props.numVisible);
     const [slideShowActiveState, setSlideShowActiveState] = React.useState(false);
     const [activeIndexState, setActiveIndexState] = React.useState(props.activeIndex);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const previewContentRef = React.useRef(null);
     const maskRef = React.useRef(null);
     const activeItemIndex = props.onItemChange ? props.activeIndex : activeIndexState;
@@ -93,6 +93,10 @@ export const Galleria = React.memo(React.forwardRef((props, ref) => {
         setNumVisibleState(props.numVisible);
     }, [props.numVisible]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useUnmountEffect(() => {
         if (slideShowActiveState) {
             stopSlideShow();
diff --git a/components/lib/gmap/GMap.js b/components/lib/gmap/GMap.js
index 9bcfbd1895..8a3d3187fe 100644
--- a/components/lib/gmap/GMap.js
+++ b/components/lib/gmap/GMap.js
@@ -4,7 +4,7 @@ import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { ObjectUtils } from '../utils/Utils';
 
 export const GMap = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const map = React.useRef(null);
     const prevOverlays = React.useRef(null);
 
@@ -110,6 +110,10 @@ export const GMap = React.memo(React.forwardRef((props, ref) => {
         }
     });
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     React.useImperativeHandle(ref, () => ({
         getMap
     }));
diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js
index a4a2d1859d..3d29df3349 100644
--- a/components/lib/image/Image.js
+++ b/components/lib/image/Image.js
@@ -10,7 +10,7 @@ export const Image = React.memo(React.forwardRef((props, ref) => {
     const [previewVisibleState, setPreviewVisibleState] = React.useState(false);
     const [rotateState, setRotateState] = React.useState(0);
     const [scaleState, setScaleState] = React.useState(1);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const maskRef = React.useRef(null);
     const previewRef = React.useRef(null);
     const previewClick = React.useRef(false);
@@ -90,6 +90,10 @@ export const Image = React.memo(React.forwardRef((props, ref) => {
         maskRef.current && ZIndexUtils.clear(maskRef.current);
     });
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const createPreview = () => {
         if (props.preview) {
             return (
diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index bffa3edda9..8f437fe326 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -7,7 +7,7 @@ import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const InputNumber = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const inputRef = React.useRef(null);
     const timer = React.useRef(null);
     const lastValue = React.useRef(null);
@@ -941,6 +941,10 @@ export const InputNumber = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useMountEffect(() => {
         constructParser();
 
diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js
index a0f1ba1806..a7c0fc3b03 100644
--- a/components/lib/inputswitch/InputSwitch.js
+++ b/components/lib/inputswitch/InputSwitch.js
@@ -4,7 +4,7 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const InputSwitch = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const inputRef = React.useRef(props.inputRef);
     const checked = props.checked === props.trueValue;
 
@@ -51,6 +51,10 @@ export const InputSwitch = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const otherProps = ObjectUtils.findDiffKeys(props, InputSwitch.defaultProps);
     const className = classNames('p-inputswitch p-component', {
diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js
index a007038079..d172985fce 100644
--- a/components/lib/knob/Knob.js
+++ b/components/lib/knob/Knob.js
@@ -9,7 +9,7 @@ const minRadians = 4 * Math.PI / 3;
 const maxRadians = -Math.PI / 3;
 
 export const Knob = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const enabled = !props.disabled && !props.readOnly;
 
     const [bindWindowMouseMoveListener, unbindWindowMouseMoveListener] = useEventListener({
@@ -130,6 +130,10 @@ export const Knob = React.memo(React.forwardRef((props, ref) => {
         unbindWindowTouchEndListener();
     }
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const otherProps = ObjectUtils.findDiffKeys(props, Knob.defaultProps);
     const className = classNames('p-knob p-component', {
         'p-disabled': props.disabled,
diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js
index 503b1e0f4e..168b7bf5df 100644
--- a/components/lib/listbox/ListBox.js
+++ b/components/lib/listbox/ListBox.js
@@ -9,7 +9,7 @@ import { ListBoxItem } from './ListBoxItem';
 
 export const ListBox = React.memo(React.forwardRef((props, ref) => {
     const [filterValueState, setFilterValueState] = React.useState('');
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const virtualScrollerRef = React.useRef(null);
     const optionTouched = React.useRef(false);
     const filteredValue = (props.onFilterValueChange ? props.filterValue : filterValueState) || '';
@@ -254,6 +254,10 @@ export const ListBox = React.memo(React.forwardRef((props, ref) => {
         scrollToSelectedIndex();
     });
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const createHeader = () => {
         return props.filter ? <ListBoxHeader filter={filteredValue} onFilter={onFilter} disabled={props.disabled} filterPlaceholder={props.filterPlaceholder} filterInputProps={props.filterInputProps} /> : null;
     }
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 49328c89cb..9e3f6e30a5 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -10,7 +10,7 @@ export const MultiSelect = React.memo(React.forwardRef((props, ref) => {
     const [filterState, setFilterState] = React.useState('');
     const [focusedState, setFocusedState] = React.useState(false);
     const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const inputRef = React.useRef(props.inputRef);
     const labelRef = React.useRef(null);
     const overlayRef = React.useRef(null);
@@ -504,6 +504,10 @@ export const MultiSelect = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useUpdateEffect(() => {
         if (overlayVisibleState && hasFilter) {
             alignOverlay();
diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
index ed557e8510..44be89ccaa 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckbox.js
+++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -6,7 +6,7 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const MultiStateCheckbox = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const equalityKey = props.optionValue ? null : props.dataKey;
 
     const onClick = (event) => {
@@ -82,6 +82,10 @@ export const MultiStateCheckbox = React.memo(React.forwardRef((props, ref) => {
         }
     });
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const createIcon = () => {
         const icon = (selectedOption && selectedOption.icon) || '';
         const className = classNames('p-checkbox-icon p-c', {
diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
index 758aa6466f..c8339ae912 100644
--- a/components/lib/orderlist/OrderList.js
+++ b/components/lib/orderlist/OrderList.js
@@ -6,7 +6,7 @@ import { OrderListSubList } from './OrderListSubList';
 
 export const OrderList = React.memo(React.forwardRef((props, ref) => {
     const [selectionState, setSelectionState] = React.useState([]);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const reorderDirection = React.useRef(null);
 
     const onItemClick = (event) => {
@@ -110,6 +110,10 @@ export const OrderList = React.memo(React.forwardRef((props, ref) => {
         }
     });
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const otherProps = ObjectUtils.findDiffKeys(props, OrderList.defaultProps);
     const className = classNames('p-orderlist p-component', props.className);
 
diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
index 8531635995..c098a8800b 100644
--- a/components/lib/password/Password.js
+++ b/components/lib/password/Password.js
@@ -18,7 +18,7 @@ export const Password = React.memo(React.forwardRef((props, ref) => {
     const [infoTextState, setInfoTextState] = React.useState(promptLabel);
     const [focusedState, setFocusedState] = React.useState(false);
     const [unmaskedState, setUnmaskedState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const overlayRef = React.useRef(null);
     const inputRef = React.useRef(props.inputRef);
     const mediumCheckRegExp = React.useRef(new RegExp(props.mediumRegex));
@@ -212,6 +212,10 @@ export const Password = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     React.useEffect(() => {
         mediumCheckRegExp.current = new RegExp(props.mediumRegex);
     }, [props.mediumRegex]);
diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js
index b747875226..b4d6bdddfd 100644
--- a/components/lib/radiobutton/RadioButton.js
+++ b/components/lib/radiobutton/RadioButton.js
@@ -4,7 +4,7 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const RadioButton = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const inputRef = React.useRef(props.inputRef);
 
     const select = (e) => {
@@ -51,6 +51,10 @@ export const RadioButton = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     React.useImperativeHandle(ref, () => ({
         select
     }));
diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js
index 2a744e121d..0198b5a519 100644
--- a/components/lib/rating/Rating.js
+++ b/components/lib/rating/Rating.js
@@ -3,7 +3,7 @@ import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Rating = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const enabled = !props.disabled && !props.readOnly;
     const tabIndex = enabled ? 0 : null;
 
@@ -76,6 +76,10 @@ export const Rating = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const otherProps = ObjectUtils.findDiffKeys(props, Rating.defaultProps);
     const className = classNames('p-rating', {
diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js
index 58cc9564ae..d93414db20 100644
--- a/components/lib/selectbutton/SelectButton.js
+++ b/components/lib/selectbutton/SelectButton.js
@@ -4,7 +4,7 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 import { SelectButtonItem } from './SelectButtonItem';
 
 export const SelectButton = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
 
     const onOptionClick = (event) => {
         if (props.disabled || isOptionDisabled(event.option)) {
@@ -90,6 +90,10 @@ export const SelectButton = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const otherProps = ObjectUtils.findDiffKeys(props, SelectButton.defaultProps);
     const className = classNames('p-selectbutton p-buttonset p-component', props.className);
diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js
index bae2feb530..b2956ea9eb 100644
--- a/components/lib/slider/Slider.js
+++ b/components/lib/slider/Slider.js
@@ -3,7 +3,7 @@ import { useEventListener } from '../hooks/Hooks';
 import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const Slider = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const handleIndex = React.useRef(0);
     const sliderHandleClick = React.useRef(false);
     const dragging = React.useRef(false);
@@ -20,6 +20,10 @@ export const Slider = React.memo(React.forwardRef((props, ref) => {
     const [bindDocumentTouchMoveListener, unbindDocumentTouchMoveListener] = useEventListener({ type: 'touchmove', listener: (event) => onDrag(event) });
     const [bindDocumentTouchEndListener, unbindDocumentTouchEndListener] = useEventListener({ type: 'touchend', listener: (event) => onDragEnd(event) });
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const spin = (event, dir) => {
         const val = props.range ? value[handleIndex.current] : value;
         const step = (props.step || 1) * dir;
diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js
index 2095a22700..719463d6ad 100644
--- a/components/lib/splitbutton/SplitButton.js
+++ b/components/lib/splitbutton/SplitButton.js
@@ -11,7 +11,7 @@ import { SplitButtonPanel } from './SplitButtonPanel';
 export const SplitButton = React.memo(React.forwardRef((props, ref) => {
     const [idState, setIdState] = React.useState(props.id);
     const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const defaultButtonRef = React.useRef(null);
     const overlayRef = React.useRef(null);
 
@@ -84,6 +84,10 @@ export const SplitButton = React.memo(React.forwardRef((props, ref) => {
         hide
     }));
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const createItems = () => {
         if (props.model) {
             return props.model.map((menuitem, index) => {
diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js
index feec642438..362365a347 100644
--- a/components/lib/splitter/Splitter.js
+++ b/components/lib/splitter/Splitter.js
@@ -5,7 +5,7 @@ import { useMountEffect, useEventListener } from '../hooks/Hooks';
 export const SplitterPanel = () => { }
 
 export const Splitter = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const gutterRef = React.useRef();
     const gutterRefs = React.useRef({});
     const size = React.useRef(null);
@@ -200,6 +200,10 @@ export const Splitter = React.memo(React.forwardRef((props, ref) => {
         }
     });
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const createPanel = (panel, index) => {
         const otherProps = ObjectUtils.findDiffKeys(panel.props, SplitterPanel.defaultProps);
         const panelClassName = classNames('p-splitter-panel', panel.props.className);
diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js
index 292a689a5e..61f69f93b1 100644
--- a/components/lib/togglebutton/ToggleButton.js
+++ b/components/lib/togglebutton/ToggleButton.js
@@ -4,11 +4,15 @@ import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const ToggleButton = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const hasLabel = props.onLabel && props.onLabel.length > 0 && props.offLabel && props.offLabel.length > 0;
     const hasIcon = props.onIcon && props.onIcon.length > 0 && props.offIcon && props.offIcon.length > 0;
     const label = hasLabel ? (props.checked ? props.onLabel : props.offLabel) : '&nbsp;';
-    const icon = props.checked ? props.onIcon : props.offIcon
+    const icon = props.checked ? props.onIcon : props.offIcon;
+
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
 
     const toggle = (e) => {
         if (!props.disabled && props.onChange) {
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index 546344ff8d..a76c3c0089 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -5,7 +5,11 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const TriStateCheckbox = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
+
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
 
     const onClick = (event) => {
         if (!props.disabled && !props.readOnly) {