diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js
index 373155304b..8da394d756 100644
--- a/components/lib/accordion/Accordion.js
+++ b/components/lib/accordion/Accordion.js
@@ -96,6 +96,7 @@ export const Accordion = React.forwardRef((props, ref) => {
         if (shouldUseTab(tab)) {
             const key = idState + '_' + index;
             const selected = isSelected(index);
+            const otherProps = ObjectUtils.findDiffKeys(tab.props, AccordionTab.defaultProps);
             const tabHeader = createTabHeader(tab, selected, index);
             const tabContent = createTabContent(tab, selected, index);
             const tabClassName = classNames('p-accordion-tab', {
@@ -103,7 +104,7 @@ export const Accordion = React.forwardRef((props, ref) => {
             });
 
             return (
-                <div key={key} className={tabClassName}>
+                <div key={key} className={tabClassName} {...otherProps}>
                     {tabHeader}
                     {tabContent}
                 </div>
@@ -117,11 +118,12 @@ export const Accordion = React.forwardRef((props, ref) => {
         return React.Children.map(props.children, createTab);
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Accordion.defaultProps);
     const className = classNames('p-accordion p-component', props.className);
     const tabs = createTabs();
 
     return (
-        <div id={idState} className={className} style={props.style}>
+        <div id={idState} className={className} style={props.style} {...otherProps}>
             {tabs}
         </div>
     )
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
index c975c0fe46..5bc7112b3d 100644
--- a/components/lib/autocomplete/AutoComplete.js
+++ b/components/lib/autocomplete/AutoComplete.js
@@ -537,6 +537,7 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
 
     const listId = idState + '_list';
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+    const otherProps = ObjectUtils.findDiffKeys(props, AutoComplete.defaultProps);
     const className = classNames('p-autocomplete p-component p-inputwrapper', {
         'p-autocomplete-dd': props.dropdown,
         'p-autocomplete-multiple': props.multiple,
@@ -549,7 +550,7 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <span {...ObjectUtils.findDiffKeys(props, AutoComplete.defaultProps)} ref={elementRef} id={idState} style={props.style} className={className} aria-haspopup="listbox" aria-expanded={overlayVisibleState} aria-owns={listId}>
+            <span ref={elementRef} id={idState} style={props.style} className={className} aria-haspopup="listbox" aria-expanded={overlayVisibleState} aria-owns={listId} {...otherProps}>
                 {input}
                 {loader}
                 {dropdown}
diff --git a/components/lib/avatar/Avatar.js b/components/lib/avatar/Avatar.js
index d0ee9fabfa..50b96e57f2 100644
--- a/components/lib/avatar/Avatar.js
+++ b/components/lib/avatar/Avatar.js
@@ -17,6 +17,7 @@ export const Avatar = React.forwardRef((props, ref) => {
         return null;
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Avatar.defaultProps);
     const containerClassName = classNames('p-avatar p-component', {
         'p-avatar-image': props.image != null,
         'p-avatar-circle': props.shape === 'circle',
@@ -28,7 +29,7 @@ export const Avatar = React.forwardRef((props, ref) => {
     const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
 
     return (
-        <div className={containerClassName} style={props.style} onClick={props.onClick}>
+        <div className={containerClassName} style={props.style} {...otherProps}>
             {content}
             {props.children}
         </div>
@@ -47,6 +48,5 @@ Avatar.defaultProps = {
     className: null,
     template: null,
     imageAlt: 'avatar',
-    onImageError: null,
-    onClick: null
+    onImageError: null
 }
diff --git a/components/lib/avatargroup/AvatarGroup.js b/components/lib/avatargroup/AvatarGroup.js
index 1d6ebc8a47..57d391869c 100644
--- a/components/lib/avatargroup/AvatarGroup.js
+++ b/components/lib/avatargroup/AvatarGroup.js
@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { classNames } from '../utils/Utils';
+import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const AvatarGroup = React.forwardRef((props, ref) => {
+    const otherProps = ObjectUtils.findDiffKeys(props, AvatarGroup.defaultProps);
     const className = classNames('p-avatar-group p-component', props.className);
 
     return (
-        <div className={className} style={props.style}>
+        <div className={className} style={props.style} {...otherProps}>
             {props.children}
         </div>
     )
diff --git a/components/lib/badge/Badge.js b/components/lib/badge/Badge.js
index 30f5d1e128..823d1c9b9d 100644
--- a/components/lib/badge/Badge.js
+++ b/components/lib/badge/Badge.js
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { classNames } from '../utils/Utils';
+import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Badge = React.memo(React.forwardRef((props, ref) => {
+    const otherProps = ObjectUtils.findDiffKeys(props, Badge.defaultProps);
     const className = classNames('p-badge p-component', {
         'p-badge-no-gutter': props.value && String(props.value).length === 1,
         'p-badge-dot': !props.value,
@@ -11,7 +12,7 @@ export const Badge = React.memo(React.forwardRef((props, ref) => {
     }, props.className);
 
     return (
-        <span className={className} style={props.style}>
+        <span className={className} style={props.style} {...otherProps}>
             {props.value}
         </span>
     )
diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js
index 491695f731..b8c49ad833 100644
--- a/components/lib/blockui/BlockUI.js
+++ b/components/lib/blockui/BlockUI.js
@@ -86,10 +86,11 @@ export const BlockUI = React.forwardRef((props, ref) => {
         return null;
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, BlockUI.defaultProps);
     const mask = createMask();
 
     return (
-        <div id={props.id} className="p-blockui-container">
+        <div id={props.id} className="p-blockui-container" {...otherProps}>
             {props.children}
             {mask}
         </div>
diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js
index 6329938e80..bba7bdf9eb 100644
--- a/components/lib/breadcrumb/BreadCrumb.js
+++ b/components/lib/breadcrumb/BreadCrumb.js
@@ -94,13 +94,14 @@ export const BreadCrumb = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, BreadCrumb.defaultProps);
     const className = classNames('p-breadcrumb p-component', props.className);
     const home = createHome();
     const items = createMenuitems();
     const separator = createSeparator();
 
     return (
-        <nav id={props.id} className={className} style={props.style} aria-label="Breadcrumb">
+        <nav id={props.id} className={className} style={props.style} aria-label="Breadcrumb" {...otherProps}>
             <ul>
                 {home}
                 {separator}
diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
index 5a9012e3cd..c9275effaf 100644
--- a/components/lib/button/Button.js
+++ b/components/lib/button/Button.js
@@ -40,7 +40,7 @@ export const Button = React.memo(React.forwardRef((props, ref) => {
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const disabled = props.disabled || props.loading;
-    const buttonProps = ObjectUtils.findDiffKeys(props, Button.defaultProps);
+    const otherProps = ObjectUtils.findDiffKeys(props, Button.defaultProps);
     const className = classNames('p-button p-component', props.className, {
         'p-button-icon-only': (props.icon || (props.loading && props.loadingIcon)) && !props.label,
         'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
@@ -56,7 +56,7 @@ export const Button = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <button ref={elementRef} {...buttonProps} className={className} disabled={disabled}>
+            <button ref={elementRef} {...otherProps} className={className} disabled={disabled}>
                 {icon}
                 {label}
                 {props.children}
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 16f3018e07..c107ad53ae 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -2794,7 +2794,7 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
-    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+    const otherProps = ObjectUtils.findDiffKeys(props, Calendar.defaultProps);
     const className = classNames('p-calendar p-component p-inputwrapper', props.className, {
         [`p-calendar-w-btn p-calendar-w-btn-${props.iconPos}`]: props.showIcon,
         'p-calendar-disabled': props.disabled,
@@ -2817,7 +2817,7 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
     const footer = createFooter();
 
     return (
-        <span ref={elementRef} id={props.id} className={className} style={props.style}>
+        <span ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
             {content}
             <CalendarPanel ref={overlayRef} className={panelClassName} style={props.panelStyle} appendTo={props.appendTo} inline={props.inline} onClick={onPanelClick} onMouseUp={onPanelMouseUp}
                 in={visible} onEnter={onOverlayEnter} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited}
diff --git a/components/lib/captcha/Captcha.js b/components/lib/captcha/Captcha.js
index 7f7f4ba9be..ec5ecc6d53 100644
--- a/components/lib/captcha/Captcha.js
+++ b/components/lib/captcha/Captcha.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 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);
@@ -78,7 +79,9 @@ export const Captcha = React.memo(React.forwardRef((props, ref) => {
         getResponse
     }));
 
-    return <div ref={elementRef} id={props.id}></div>
+    const otherProps = ObjectUtils.findDiffKeys(props, Captcha.defaultProps);
+
+    return <div ref={elementRef} id={props.id} {...otherProps}></div>
 }));
 
 Captcha.displayName = 'Captcha';
diff --git a/components/lib/card/Card.js b/components/lib/card/Card.js
index 19a36e337f..db8d29053e 100644
--- a/components/lib/card/Card.js
+++ b/components/lib/card/Card.js
@@ -27,12 +27,13 @@ export const Card = React.forwardRef((props, ref) => {
         )
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Card.defaultProps);
     const className = classNames('p-card p-component', props.className);
     const header = createHeader();
     const body = createBody();
 
     return (
-        <div id={props.id} className={className} style={props.style}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             {header}
             {body}
         </div>
diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
index efd991b179..d74befb089 100644
--- a/components/lib/carousel/Carousel.js
+++ b/components/lib/carousel/Carousel.js
@@ -542,6 +542,7 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
         )
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Carousel.defaultProps);
     const className = classNames('p-carousel p-component', {
         'p-carousel-vertical': isVertical,
         'p-carousel-horizontal': !isVertical
@@ -553,7 +554,7 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
     const footer = createFooter();
 
     return (
-        <div ref={elementRef} id={props.id} className={className} style={props.style}>
+        <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
             {header}
             <div className={contentClassName}>
                 {content}
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
index 8d015a5308..2bed563cc8 100644
--- a/components/lib/cascadeselect/CascadeSelect.js
+++ b/components/lib/cascadeselect/CascadeSelect.js
@@ -243,6 +243,7 @@ export const CascadeSelect = React.memo(React.forwardRef((props, ref) => {
     }
 
     const createElement = () => {
+        const otherProps = ObjectUtils.findDiffKeys(props, CascadeSelect.defaultProps);
         const className = classNames('p-cascadeselect p-component p-inputwrapper', {
             'p-disabled': props.disabled,
             'p-focus': focusedState,
@@ -256,7 +257,7 @@ export const CascadeSelect = React.memo(React.forwardRef((props, ref) => {
         const overlay = createOverlay();
 
         return (
-            <div {...ObjectUtils.findDiffKeys(props, CascadeSelect.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
+            <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onClick}>
                 {keyboardHelper}
                 {labelElement}
                 {dropdownIcon}
diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js
index b6f3304c33..8e8f37a746 100644
--- a/components/lib/chart/Chart.js
+++ b/components/lib/chart/Chart.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useUnmountEffect } from '../hooks/Hooks';
-import { classNames } from '../utils/Utils';
+import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Chart = React.memo(React.forwardRef((props, ref) => {
     const chartRef = React.useRef(null);
@@ -43,11 +43,12 @@ export const Chart = React.memo(React.forwardRef((props, ref) => {
         }
     });
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Chart.defaultProps);
     const className = classNames('p-chart', props.className);
     const style = Object.assign({ width: props.width, height: props.height }, props.style);
 
     return (
-        <div id={props.id} style={style} className={className}>
+        <div id={props.id} style={style} className={className} {...otherProps}>
             <canvas ref={canvasRef} width={props.width} height={props.height}></canvas>
         </div>
     );
diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
index b0b257293a..d9c9eda170 100644
--- a/components/lib/checkbox/Checkbox.js
+++ b/components/lib/checkbox/Checkbox.js
@@ -64,6 +64,7 @@ export const Checkbox = React.memo(React.forwardRef((props, ref) => {
 
     const checked = isChecked();
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+    const otherProps = ObjectUtils.findDiffKeys(props, Checkbox.defaultProps);
     const className = classNames('p-checkbox p-component', {
         'p-checkbox-checked': checked,
         'p-checkbox-disabled': props.disabled,
@@ -78,7 +79,7 @@ export const Checkbox = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <div {...ObjectUtils.findDiffKeys(props, Checkbox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick} onContextMenu={props.onContextMenu} onMouseDown={props.onMouseDown}>
+            <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onClick} onContextMenu={props.onContextMenu} onMouseDown={props.onMouseDown}>
                 <div className="p-hidden-accessible">
                     <input ref={inputRef} type="checkbox" id={props.inputId} name={props.name} tabIndex={props.tabIndex} defaultChecked={checked} aria-labelledby={props.ariaLabelledBy}
                         onKeyDown={onKeyDown} onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} readOnly={props.readOnly} required={props.required} />
diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
index 6aa78dc994..aee62401e3 100644
--- a/components/lib/chip/Chip.js
+++ b/components/lib/chip/Chip.js
@@ -40,6 +40,7 @@ export const Chip = React.memo(React.forwardRef((props, ref) => {
     }
 
     const createElement = () => {
+        const otherProps = ObjectUtils.findDiffKeys(props, Chip.defaultProps);
         const className = classNames('p-chip p-component', {
             'p-chip-image': props.image != null
         }, props.className);
@@ -47,7 +48,7 @@ export const Chip = React.memo(React.forwardRef((props, ref) => {
         const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
 
         return (
-            <div className={className} style={props.style}>
+            <div className={className} style={props.style} {...otherProps}>
                 {content}
             </div>
         )
diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
index 2adc0ed60f..7e3a68f4dc 100644
--- a/components/lib/chips/Chips.js
+++ b/components/lib/chips/Chips.js
@@ -207,6 +207,7 @@ export const Chips = React.memo(React.forwardRef((props, ref) => {
     }
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+    const otherProps = ObjectUtils.findDiffKeys(props, Chips.defaultProps);
     const className = classNames('p-chips p-component p-inputwrapper', {
         'p-inputwrapper-filled': isFilled,
         'p-inputwrapper-focus': focusedState
@@ -215,7 +216,7 @@ export const Chips = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <div ref={elementRef} id={props.id} className={className} style={props.style}>
+            <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
                 {list}
             </div>
             {hasTooltip && <Tooltip target={inputRef} content={props.tooltip} {...props.tooltipOptions} />}
diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js
index 348a261696..0b0e74978c 100644
--- a/components/lib/colorpicker/ColorPicker.js
+++ b/components/lib/colorpicker/ColorPicker.js
@@ -510,6 +510,7 @@ export const ColorPicker = React.memo(React.forwardRef((props, ref) => {
     }
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+    const otherProps = ObjectUtils.findDiffKeys(props, ColorPicker.defaultProps);
     const className = classNames('p-colorpicker p-component', {
         'p-colorpicker-overlay': !props.inline
     }, props.className);
@@ -518,7 +519,7 @@ export const ColorPicker = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <div ref={elementRef} id={props.id} style={props.style} className={className}>
+            <div ref={elementRef} id={props.id} style={props.style} className={className} {...otherProps}>
                 {input}
                 <ColorPickerPanel ref={overlayRef} appendTo={props.appendTo} inline={props.inline} disabled={props.disabled} onClick={onPanelClick}
                     in={props.inline || overlayVisibleState} onEnter={onOverlayEnter} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited}
diff --git a/components/lib/confirmdialog/ConfirmDialog.js b/components/lib/confirmdialog/ConfirmDialog.js
index b0285bf284..65a2f83c7c 100644
--- a/components/lib/confirmdialog/ConfirmDialog.js
+++ b/components/lib/confirmdialog/ConfirmDialog.js
@@ -128,13 +128,13 @@ export const ConfirmDialog = React.memo(React.forwardRef((props, ref) => {
     const createElement = () => {
         const currentProps = getCurrentProps();
         const className = classNames('p-confirm-dialog', getPropValue('className'));
-        const dialogProps = ObjectUtils.findDiffKeys(currentProps, ConfirmDialog.defaultProps);
+        const otherProps = ObjectUtils.findDiffKeys(currentProps, ConfirmDialog.defaultProps);
         const message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
         const icon = IconUtils.getJSXIcon(getPropValue('icon'), { className: 'p-confirm-dialog-icon' }, { props: currentProps });
         const footer = createFooter();
 
         return (
-            <Dialog visible={visibleState} {...dialogProps} className={className} footer={footer} onHide={hide} breakpoints={getPropValue('breakpoints')}>
+            <Dialog visible={visibleState} {...otherProps} className={className} footer={footer} onHide={hide} breakpoints={getPropValue('breakpoints')}>
                 {icon}
                 <span className="p-confirm-dialog-message">{message}</span>
             </Dialog>
diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js
index 14cc5569a5..f076ee6fe8 100644
--- a/components/lib/confirmpopup/ConfirmPopup.js
+++ b/components/lib/confirmpopup/ConfirmPopup.js
@@ -226,6 +226,7 @@ export const ConfirmPopup = React.memo(React.forwardRef((props, ref) => {
     }
 
     const createElement = () => {
+        const otherProps = ObjectUtils.findDiffKeys(props, ConfirmPopup.defaultProps);
         const className = classNames('p-confirm-popup p-component', getPropValue('className'));
         const content = createContent();
         const footer = createFooter();
@@ -233,7 +234,7 @@ export const ConfirmPopup = React.memo(React.forwardRef((props, ref) => {
         return (
             <CSSTransition nodeRef={overlayRef} classNames="p-connected-overlay" in={visibleState} timeout={{ enter: 120, exit: 100 }} options={getPropValue('transitionOptions')}
                 unmountOnExit onEnter={onEnter} onEntered={onEntered} onExit={onExit} onExited={onExited}>
-                <div ref={overlayRef} id={getPropValue('id')} className={className} style={getPropValue('style')} onClick={onPanelClick}>
+                <div ref={overlayRef} id={getPropValue('id')} className={className} style={getPropValue('style')} {...otherProps} onClick={onPanelClick}>
                     {content}
                     {footer}
                 </div>
diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js
index 0f88e93379..dd40192d22 100644
--- a/components/lib/contextmenu/ContextMenu.js
+++ b/components/lib/contextmenu/ContextMenu.js
@@ -3,7 +3,7 @@ import PrimeReact from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useEventListener, useMountEffect, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { Portal } from '../portal/Portal';
-import { classNames, DomHandler, ZIndexUtils } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils';
 import { ContextMenuSub } from './ContextMenuSub';
 
 export const ContextMenu = React.memo(React.forwardRef((props, ref) => {
@@ -169,12 +169,13 @@ export const ContextMenu = React.memo(React.forwardRef((props, ref) => {
     }));
 
     const createContextMenu = () => {
+        const otherProps = ObjectUtils.findDiffKeys(props, ContextMenu.defaultProps);
         const className = classNames('p-contextmenu p-component', props.className);
 
         return (
             <CSSTransition nodeRef={menuRef} classNames="p-contextmenu" in={visibleState} timeout={{ enter: 250, exit: 0 }} options={props.transitionOptions}
                 unmountOnExit onEnter={onEnter} onEntered={onEntered} onExit={onExit} onExited={onExited}>
-                <div ref={menuRef} id={props.id} className={className} style={props.style} onClick={onMenuClick} onMouseEnter={onMenuMouseEnter}>
+                <div ref={menuRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onMenuClick} onMouseEnter={onMenuMouseEnter}>
                     <ContextMenuSub model={props.model} root resetMenu={resetMenuState} onLeafClick={onLeafClick} />
                 </div>
             </CSSTransition>
diff --git a/components/lib/datascroller/DataScroller.js b/components/lib/datascroller/DataScroller.js
index 3bd6a1db82..656d328459 100644
--- a/components/lib/datascroller/DataScroller.js
+++ b/components/lib/datascroller/DataScroller.js
@@ -190,6 +190,7 @@ export const DataScroller = React.memo(React.forwardRef((props, ref) => {
         )
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, DataScroller.defaultProps);
     const className = classNames('p-datascroller p-component', props.className, {
         'p-datascroller-inline': props.inline
     });
@@ -199,7 +200,7 @@ export const DataScroller = React.memo(React.forwardRef((props, ref) => {
     const content = createContent();
 
     return (
-        <div id={props.id} className={className}>
+        <div id={props.id} className={className} {...otherProps}>
             {header}
             {content}
             {footer}
diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
index 1253248912..fe12d73080 100644
--- a/components/lib/datatable/DataTable.js
+++ b/components/lib/datatable/DataTable.js
@@ -1515,6 +1515,7 @@ export const DataTable = React.forwardRef((props, ref) => {
     const empty = ObjectUtils.isEmpty(data);
     const selectionModeInColumn = getSelectionModeInColumn(columns);
     const selectable = props.selectionMode || selectionModeInColumn;
+    const otherProps = ObjectUtils.findDiffKeys(props, DataTable.defaultProps);
     const className = classNames('p-datatable p-component', {
         'p-datatable-hoverable-rows': props.rowHover,
         'p-datatable-selectable': selectable && !props.cellSelection,
@@ -1547,7 +1548,7 @@ export const DataTable = React.forwardRef((props, ref) => {
     const reorderIndicators = createReorderIndicators();
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, DataTable.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} data-scrollselectors=".p-datatable-wrapper">
+        <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} data-scrollselectors=".p-datatable-wrapper">
             {loader}
             {header}
             {paginatorTop}
diff --git a/components/lib/dataview/DataView.js b/components/lib/dataview/DataView.js
index b746493d0c..cedf0d1d8d 100644
--- a/components/lib/dataview/DataView.js
+++ b/components/lib/dataview/DataView.js
@@ -14,12 +14,13 @@ export const DataViewLayoutOptions = React.memo((props) => {
         event.preventDefault();
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, DataViewLayoutOptions.defaultProps);
     const className = classNames('p-dataview-layout-options p-selectbutton p-buttonset', props.className);
     const buttonListClass = classNames('p-button p-button-icon-only', { 'p-highlight': props.layout === 'list' });
     const buttonGridClass = classNames('p-button p-button-icon-only', { 'p-highlight': props.layout === 'grid' });
 
     return (
-        <div id={props.id} style={props.style} className={className}>
+        <div id={props.id} style={props.style} className={className} {...otherProps}>
             <button type="button" className={buttonListClass} onClick={(event) => changeLayout(event, 'list')}>
                 <i className="pi pi-bars"></i>
                 <Ripple />
@@ -196,6 +197,7 @@ export const DataView = React.memo(React.forwardRef((props, ref) => {
 
     const data = processData();
 
+    const otherProps = ObjectUtils.findDiffKeys(props, DataView.defaultProps);
     const className = classNames('p-dataview p-component', {
         [`p-dataview-${props.layout}`]: !!props.layout,
         'p-dataview-loading': props.loading
@@ -208,7 +210,7 @@ export const DataView = React.memo(React.forwardRef((props, ref) => {
     const content = createContent(data);
 
     return (
-        <div id={props.id} style={props.style} className={className}>
+        <div id={props.id} style={props.style} className={className} {...otherProps}>
             {loader}
             {header}
             {topPaginator}
diff --git a/components/lib/deferredcontent/DeferredContent.js b/components/lib/deferredcontent/DeferredContent.js
index f496e6a820..4ed0039b03 100644
--- a/components/lib/deferredcontent/DeferredContent.js
+++ b/components/lib/deferredcontent/DeferredContent.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useEventListener, useMountEffect } from '../hooks/Hooks';
+import { ObjectUtils } from '../utils/Utils';
 
 export const DeferredContent = React.forwardRef((props, ref) => {
     const [loadedState, setLoadedState] = React.useState(false);
@@ -37,8 +38,10 @@ export const DeferredContent = React.forwardRef((props, ref) => {
         }
     });
 
+    const otherProps = ObjectUtils.findDiffKeys(props, DeferredContent.defaultProps);
+
     return (
-        <div ref={elementRef}>
+        <div ref={elementRef} {...otherProps}>
             {loadedState && props.children}
         </div>
     )
diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
index 7a2b94c8ac..d11c7f89eb 100644
--- a/components/lib/dialog/Dialog.js
+++ b/components/lib/dialog/Dialog.js
@@ -482,6 +482,7 @@ export const Dialog = React.forwardRef((props, ref) => {
     }
 
     const createElement = () => {
+        const otherProps = ObjectUtils.findDiffKeys(props, Dialog.defaultProps);
         const className = classNames('p-dialog p-component', props.className, {
             'p-dialog-rtl': props.rtl,
             'p-dialog-maximized': maximized
@@ -509,7 +510,7 @@ export const Dialog = React.forwardRef((props, ref) => {
                 <CSSTransition nodeRef={dialogRef} classNames="p-dialog" timeout={transitionTimeout} in={visibleState} options={props.transitionOptions}
                     unmountOnExit onEnter={onEnter} onEntered={onEntered} onExiting={onExiting} onExited={onExited}>
                     <div ref={dialogRef} id={idState} className={className} style={props.style} onClick={props.onClick}
-                        role="dialog" aria-labelledby={headerId} aria-describedby={contentId} aria-modal={props.modal}>
+                        role="dialog" {...otherProps} aria-labelledby={headerId} aria-describedby={contentId} aria-modal={props.modal}>
                         {header}
                         {content}
                         {footer}
diff --git a/components/lib/divider/Divider.js b/components/lib/divider/Divider.js
index f4ef797c10..635f2d079b 100644
--- a/components/lib/divider/Divider.js
+++ b/components/lib/divider/Divider.js
@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { classNames } from '../utils/Utils';
+import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Divider = React.forwardRef((props, ref) => {
     const horizontal = props.layout === 'horizontal';
     const vertical = props.layout === 'vertical';
+    const otherProps = ObjectUtils.findDiffKeys(props, Divider.defaultProps);
     const className = classNames(`p-divider p-component p-divider-${props.layout} p-divider-${props.type}`, {
         'p-divider-left': horizontal && (!props.align || props.align === 'left'),
         'p-divider-right': horizontal && props.align === 'right',
@@ -13,7 +14,7 @@ export const Divider = React.forwardRef((props, ref) => {
     }, props.className);
 
     return (
-        <div className={className} style={props.style} role="separator">
+        <div className={className} style={props.style} role="separator" {...otherProps}>
             <div className="p-divider-content">
                 {props.children}
             </div>
diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js
index bf8c1b2965..83afe4ab67 100644
--- a/components/lib/dock/Dock.js
+++ b/components/lib/dock/Dock.js
@@ -101,6 +101,7 @@ export const Dock = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Dock.defaultProps);
     const className = classNames(`p-dock p-component p-dock-${props.position}`, {
         'p-dock-magnification': props.magnification
     }, props.className);
@@ -109,7 +110,7 @@ export const Dock = React.memo(React.forwardRef((props, ref) => {
     const footer = createFooter();
 
     return (
-        <div id={props.id} className={className} style={props.style}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             <div className="p-dock-container">
                 {header}
                 {list}
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index 267e174d06..b933c46512 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -655,6 +655,7 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {
     const selectedOption = getSelectedOption();
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+    const otherProps = ObjectUtils.findDiffKeys(props, Dropdown.defaultProps);
     const className = classNames('p-dropdown p-component p-inputwrapper', {
         'p-disabled': props.disabled,
         'p-focus': focusedState,
@@ -670,7 +671,7 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <div {...ObjectUtils.findDiffKeys(props, Dropdown.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}
+            <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onClick}
                 onMouseDown={props.onMouseDown} onContextMenu={props.onContextMenu}>
                 {keyboardHelper}
                 {hiddenSelect}
diff --git a/components/lib/editor/Editor.js b/components/lib/editor/Editor.js
index 129b8b3064..7ad5bff1ac 100644
--- a/components/lib/editor/Editor.js
+++ b/components/lib/editor/Editor.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
-import { classNames, DomHandler } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const Editor = React.memo(React.forwardRef((props, ref) => {
     const contentRef = React.useRef(null);
@@ -14,6 +14,7 @@ export const Editor = React.memo(React.forwardRef((props, ref) => {
     useMountEffect(() => {
         import('quill').then((module) => {
             if (module && module.default && DomHandler.isExist(contentRef.current)) {
+                debugger;
                 quill.current = new module.default(contentRef.current, {
                     modules: {
                         toolbar: props.showHeader ? toolbarRef.current : false,
@@ -30,7 +31,8 @@ export const Editor = React.memo(React.forwardRef((props, ref) => {
                 }
 
                 quill.current.on('text-change', (delta, source) => {
-                    let html = contentRef.current.children[0].innerHTML;
+                    let firstChild = contentRef.current.children[0];
+                    let html = firstChild ? firstChild.innerHTML : null;
                     let text = quill.current.getText();
                     if (html === '<p><br></p>') {
                         html = null;
@@ -133,12 +135,13 @@ export const Editor = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Editor.defaultProps);
     const className = classNames('p-component p-editor-container', props.className);
     const header = createToolbarHeader();
     const content = <div ref={contentRef} className="p-editor-content"></div>
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, Editor.defaultProps)} id={props.id} className={className} style={props.style}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             {header}
             {content}
         </div>
diff --git a/components/lib/fieldset/Fieldset.js b/components/lib/fieldset/Fieldset.js
index 0412a1fe26..9247d38630 100644
--- a/components/lib/fieldset/Fieldset.js
+++ b/components/lib/fieldset/Fieldset.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useMountEffect } from '../hooks/Hooks';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, UniqueComponentId } from '../utils/Utils';
+import { classNames, ObjectUtils, UniqueComponentId } from '../utils/Utils';
 
 export const Fieldset = React.forwardRef((props, ref) => {
     const [idState, setIdState] = React.useState(props.id);
@@ -102,6 +102,7 @@ export const Fieldset = React.forwardRef((props, ref) => {
         }
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Fieldset.defaultProps);
     const className = classNames('p-fieldset p-component', {
         'p-fieldset-toggleable': props.toggleable
     }, props.className);
@@ -109,7 +110,7 @@ export const Fieldset = React.forwardRef((props, ref) => {
     const content = createContent();
 
     return (
-        <fieldset id={idState} className={className} style={props.style} onClick={props.onClick}>
+        <fieldset id={idState} className={className} style={props.style} {...otherProps} onClick={props.onClick}>
             {legend}
             {content}
         </fieldset>
diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
index 683ed07cf6..04c372c055 100644
--- a/components/lib/fileupload/FileUpload.js
+++ b/components/lib/fileupload/FileUpload.js
@@ -381,6 +381,7 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
     }
 
     const createAdvanced = () => {
+        const otherProps = ObjectUtils.findDiffKeys(props, FileUpload.defaultProps);
         const className = classNames('p-fileupload p-fileupload-advanced p-component', props.className);
         const headerClassName = classNames('p-fileupload-buttonbar', props.headerClassName);
         const contentClassName = classNames('p-fileupload-content', props.contentClassName);
@@ -425,7 +426,7 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
         }
 
         return (
-            <div id={props.id} className={className} style={props.style}>
+            <div id={props.id} className={className} style={props.style} {...otherProps}>
                 {header}
                 <div ref={contentRef} className={contentClassName} style={props.contentStyle}
                     onDragEnter={onDragEnter} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}>
@@ -440,6 +441,7 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
 
     const createBasic = () => {
         const chooseOptions = props.chooseOptions;
+        const otherProps = ObjectUtils.findDiffKeys(props, FileUpload.defaultProps);
         const className = classNames('p-fileupload p-fileupload-basic p-component', props.className);
         const buttonClassName = classNames('p-button p-component p-fileupload-choose', { 'p-fileupload-choose-selected': hasFiles, 'p-disabled': props.disabled, 'p-focus': focusedState }, chooseOptions.className);
         const chooseIcon = chooseOptions.icon || classNames({ 'pi pi-plus': !chooseOptions.icon && (!hasFiles || props.auto), 'pi pi-upload': !chooseOptions.icon && hasFiles && !props.auto });
@@ -454,7 +456,7 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
         const input = !hasFiles && <input ref={fileInputRef} type="file" accept={props.accept} multiple={props.multiple} disabled={props.disabled} onChange={onFileSelect} />;
 
         return (
-            <div className={className} style={props.style}>
+            <div className={className} style={props.style} {...otherProps}>
                 <Messages ref={messagesRef} />
                 <span className={buttonClassName} style={chooseOptions.style} onMouseUp={onSimpleUploaderClick} onKeyDown={onKeyDown} onFocus={onFocus} onBlur={onBlur} tabIndex={0}>
                     {icon}
diff --git a/components/lib/fullcalendar/FullCalendar.js b/components/lib/fullcalendar/FullCalendar.js
index 6b601e6993..0007399550 100644
--- a/components/lib/fullcalendar/FullCalendar.js
+++ b/components/lib/fullcalendar/FullCalendar.js
@@ -65,7 +65,9 @@ export const FullCalendar = React.memo(React.forwardRef((props, ref) => {
         }
     });
 
-    return <div ref={elementRef} id={props.id} style={props.style} className={props.className}></div>
+    const otherProps = ObjectUtils.findDiffKeys(props, FullCalendar.defaultProps);
+
+    return <div ref={elementRef} id={props.id} style={props.style} className={props.className} {...otherProps}></div>
 }));
 
 FullCalendar.displayName = 'FullCalendar';
diff --git a/components/lib/galleria/Galleria.js b/components/lib/galleria/Galleria.js
index ab36ea8f36..979a601fad 100644
--- a/components/lib/galleria/Galleria.js
+++ b/components/lib/galleria/Galleria.js
@@ -134,6 +134,7 @@ export const Galleria = React.memo(React.forwardRef((props, ref) => {
     }
 
     const createElement = () => {
+        const otherProps = ObjectUtils.findDiffKeys(props, Galleria.defaultProps);
         const thumbnailsPosClassName = props.showThumbnails && getPositionClassName('p-galleria-thumbnails', props.thumbnailsPosition);
         const indicatorPosClassName = props.showIndicators && getPositionClassName('p-galleria-indicators', props.indicatorsPosition);
         const galleriaClassName = classNames('p-galleria p-component', props.className, {
@@ -152,7 +153,7 @@ export const Galleria = React.memo(React.forwardRef((props, ref) => {
         const header = createHeader();
         const footer = createFooter();
         const element = (
-            <div ref={elementRef} id={props.id} className={galleriaClassName} style={props.style}>
+            <div ref={elementRef} id={props.id} className={galleriaClassName} style={props.style} {...otherProps}>
                 {closeIcon}
                 {header}
                 <div className="p-galleria-content">
diff --git a/components/lib/gmap/GMap.js b/components/lib/gmap/GMap.js
index f8170eb50b..52ffabcc83 100644
--- a/components/lib/gmap/GMap.js
+++ b/components/lib/gmap/GMap.js
@@ -1,6 +1,7 @@
 /*global google*/
 import * as React from 'react';
 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);
@@ -97,7 +98,9 @@ export const GMap = React.memo(React.forwardRef((props, ref) => {
         getMap
     }));
 
-    return <div ref={elementRef} style={props.style} className={props.className}></div>
+    const otherProps = ObjectUtils.findDiffKeys(props, GMap.defaultProps);
+
+    return <div ref={elementRef} style={props.style} className={props.className} {...otherProps}></div>
 }));
 
 GMap.displayName = 'GMap';
diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js
index eeddd315a7..a4a2d1859d 100644
--- a/components/lib/image/Image.js
+++ b/components/lib/image/Image.js
@@ -145,6 +145,7 @@ export const Image = React.memo(React.forwardRef((props, ref) => {
     }
 
     const { src, alt, width, height } = props;
+    const otherProps = ObjectUtils.findDiffKeys(props, Image.defaultProps);
     const containerClassName = classNames('p-image p-component', props.className, {
         'p-image-preview-container': props.preview
     });
@@ -154,7 +155,7 @@ export const Image = React.memo(React.forwardRef((props, ref) => {
     const image = <img src={src} className={props.imageClassName} width={width} height={height} style={props.imageStyle} alt={alt} />;
 
     return (
-        <span ref={elementRef} className={containerClassName} style={props.style}>
+        <span ref={elementRef} className={containerClassName} style={props.style} {...otherProps}>
             {image}
             {preview}
             {maskVisibleState && <Portal element={element} appendTo={document.body} />}
diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js
index 184c41108a..d795d46f31 100644
--- a/components/lib/inplace/Inplace.js
+++ b/components/lib/inplace/Inplace.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button } from '../button/Button';
-import { classNames } from '../utils/Utils';
+import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const InplaceDisplay = (props) => props.children;
 export const InplaceContent = (props) => props.children;
@@ -52,12 +52,13 @@ export const Inplace = React.forwardRef((props, ref) => {
     }
 
     const createDisplay = (content) => {
+        const otherProps = ObjectUtils.findDiffKeys(content.props, InplaceDisplay.defaultProps);
         const className = classNames('p-inplace-display', {
             'p-disabled': props.disabled
         });
 
         return (
-            <div className={className} onClick={open} onKeyDown={onDisplayKeyDown} tabIndex={props.tabIndex} aria-label={props.ariaLabel}>
+            <div className={className} {...otherProps} onClick={open} onKeyDown={onDisplayKeyDown} tabIndex={props.tabIndex} aria-label={props.ariaLabel}>
                 {content}
             </div>
         )
@@ -72,10 +73,11 @@ export const Inplace = React.forwardRef((props, ref) => {
     }
 
     const createContent = (content) => {
+        const otherProps = ObjectUtils.findDiffKeys(content.props, InplaceContent.defaultProps);
         const closeButton = createCloseButton();
 
         return (
-            <div className="p-inplace-content">
+            <div className="p-inplace-content" {...otherProps}>
                 {content}
                 {closeButton}
             </div>
@@ -95,13 +97,14 @@ export const Inplace = React.forwardRef((props, ref) => {
         );
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Inplace.defaultProps);
     const children = createChildren();
     const className = classNames('p-inplace p-component', {
         'p-inplace-closable': props.closable
     }, props.className);
 
     return (
-        <div className={className}>
+        <div className={className} {...otherProps}>
             {children}
         </div>
     )
diff --git a/components/lib/inputmask/InputMask.js b/components/lib/inputmask/InputMask.js
index c7362ba642..7850234da0 100644
--- a/components/lib/inputmask/InputMask.js
+++ b/components/lib/inputmask/InputMask.js
@@ -525,10 +525,11 @@ export const InputMask = React.memo(React.forwardRef((props, ref) => {
         }
     }, [isValueUpdated]);
 
+    const otherProps = ObjectUtils.findDiffKeys(props, InputMask.defaultProps);
     const className = classNames('p-inputmask', props.className);
 
     return (
-        <InputText ref={elementRef} id={props.id} type={props.type} name={props.name} style={props.style} className={className} placeholder={props.placeholder}
+        <InputText ref={elementRef} id={props.id} type={props.type} name={props.name} style={props.style} className={className} {...otherProps} placeholder={props.placeholder}
             size={props.size} maxLength={props.maxLength} tabIndex={props.tabIndex} disabled={props.disabled} readOnly={props.readOnly}
             onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown} onKeyPress={onKeyPress} onInput={onInput} onPaste={handleInputChange}
             required={props.required} aria-labelledby={props.ariaLabelledBy} tooltip={props.tooltip} tooltipOptions={props.tooltipOptions} />
diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index ad1c5d1ddb..c73d711802 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -995,6 +995,7 @@ export const InputNumber = React.memo(React.forwardRef((props, ref) => {
     }
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+    const otherProps = ObjectUtils.findDiffKeys(props, InputNumber.defaultProps);
     const className = classNames('p-inputnumber p-component p-inputwrapper', {
         'p-inputwrapper-filled': props.value != null && props.value.toString().length > 0,
         'p-inputwrapper-focus': focusedState,
@@ -1007,7 +1008,7 @@ export const InputNumber = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <span ref={elementRef} id={props.id} className={className} style={props.style}>
+            <span ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
                 {inputElement}
                 {buttonGroup}
             </span>
diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js
index 1c750d2dde..7b40f4cca4 100644
--- a/components/lib/inputswitch/InputSwitch.js
+++ b/components/lib/inputswitch/InputSwitch.js
@@ -58,18 +58,16 @@ export const InputSwitch = React.memo(React.forwardRef((props, ref) => {
     }, [inputRef, props.inputRef]);
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+    const otherProps = ObjectUtils.findDiffKeys(props, InputSwitch.defaultProps);
     const className = classNames('p-inputswitch p-component', {
         'p-inputswitch-checked': checked,
         'p-disabled': props.disabled,
         'p-inputswitch-focus': focusedState
     }, props.className);
 
-    const inputSwitchProps = ObjectUtils.findDiffKeys(props, InputSwitch.defaultProps);
-
     return (
         <>
-            <div {...ObjectUtils.findDiffKeys(props, InputSwitch.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}
-                role="checkbox" aria-checked={checked} {...inputSwitchProps}>
+            <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onClick} role="checkbox" aria-checked={checked}>
                 <div className="p-hidden-accessible">
                     <input ref={inputRef} type="checkbox" id={props.inputId} name={props.name} checked={checked} onChange={toggle}
                         onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown} disabled={props.disabled} role="switch" aria-checked={checked}
diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
index 4bb11ba743..11cc95efa0 100644
--- a/components/lib/inputtext/InputText.js
+++ b/components/lib/inputtext/InputText.js
@@ -37,7 +37,7 @@ export const InputText = React.memo(React.forwardRef((props, ref) => {
     }, [elementRef, ref]);
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
-    const inputProps = ObjectUtils.findDiffKeys(props, InputText.defaultProps);
+    const otherProps = ObjectUtils.findDiffKeys(props, InputText.defaultProps);
     const className = classNames('p-inputtext p-component', {
         'p-disabled': props.disabled,
         'p-filled': isFilled
@@ -45,7 +45,7 @@ export const InputText = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <input ref={elementRef} {...inputProps} className={className} onInput={onInput} onKeyPress={onKeyPress} />
+            <input ref={elementRef} {...otherProps} className={className} onInput={onInput} onKeyPress={onKeyPress} />
             {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
         </>
     )
diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js
index 1d9edc903d..d5fe0e5ceb 100644
--- a/components/lib/inputtextarea/InputTextarea.js
+++ b/components/lib/inputtextarea/InputTextarea.js
@@ -82,7 +82,7 @@ export const InputTextarea = React.memo(React.forwardRef((props, ref) => {
     }, [props.autoResize]);
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
-    const textareaProps = ObjectUtils.findDiffKeys(props, InputTextarea.defaultProps);
+    const otherProps = ObjectUtils.findDiffKeys(props, InputTextarea.defaultProps);
     const className = classNames('p-inputtextarea p-inputtext p-component', {
         'p-disabled': props.disabled,
         'p-filled': isFilled,
@@ -91,7 +91,7 @@ export const InputTextarea = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <textarea ref={elementRef} {...textareaProps} className={className} onFocus={onFocus} onBlur={onBlur} onKeyUp={onKeyUp} onInput={onInput}></textarea>
+            <textarea ref={elementRef} {...otherProps} className={className} onFocus={onFocus} onBlur={onBlur} onKeyUp={onKeyUp} onInput={onInput}></textarea>
             {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
         </>
     )
diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js
index 88a58d775e..a007038079 100644
--- a/components/lib/knob/Knob.js
+++ b/components/lib/knob/Knob.js
@@ -130,13 +130,14 @@ export const Knob = React.memo(React.forwardRef((props, ref) => {
         unbindWindowTouchEndListener();
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Knob.defaultProps);
     const className = classNames('p-knob p-component', {
         'p-disabled': props.disabled,
     }, props.className);
     const text = props.showValue && <text x={50} y={57} textAnchor={'middle'} fill={props.textColor} className={'p-knob-text'} name={props.name}>{valueToDisplay()}</text>
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, Knob.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style}>
+        <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
             <svg viewBox="0 0 100 100" width={props.size} height={props.size} onClick={onClick} onMouseDown={onMouseDown} onMouseUp={onMouseUp}
                 onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
                 <path d={rangePath} strokeWidth={props.strokeWidth} stroke={props.rangeColor} className={'p-knob-range'}></path>
diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js
index 436951db25..55d4ae6722 100644
--- a/components/lib/listbox/ListBox.js
+++ b/components/lib/listbox/ListBox.js
@@ -299,6 +299,7 @@ export const ListBox = React.memo(React.forwardRef((props, ref) => {
     const visibleOptions = getVisibleOptions();
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+    const otherProps = ObjectUtils.findDiffKeys(props, ListBox.defaultProps);
     const className = classNames('p-listbox p-component', {
         'p-disabled': props.disabled
     }, props.className);
@@ -308,7 +309,7 @@ export const ListBox = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <div {...ObjectUtils.findDiffKeys(props, ListBox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style}>
+            <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
                 {header}
                 <div className={listClassName} style={props.listStyle}>
                     {list}
diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js
index 3d06eb8357..e628cdf922 100644
--- a/components/lib/megamenu/MegaMenu.js
+++ b/components/lib/megamenu/MegaMenu.js
@@ -352,6 +352,7 @@ export const MegaMenu = React.memo(React.forwardRef((props, ref) => {
     }
 
 
+    const otherProps = ObjectUtils.findDiffKeys(props, MegaMenu.defaultProps);
     const className = classNames('p-megamenu p-component', {
         'p-megamenu-horizontal': props.orientation === 'horizontal',
         'p-megamenu-vertical': props.orientation === 'vertical'
@@ -360,7 +361,7 @@ export const MegaMenu = React.memo(React.forwardRef((props, ref) => {
     const customContent = createCustomContent();
 
     return (
-        <div ref={elementRef} id={props.id} className={className} style={props.style}>
+        <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
             <ul className="p-megamenu-root-list" role="menubar">
                 {menu}
             </ul>
diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js
index cb355d23cf..d545ade63b 100644
--- a/components/lib/menu/Menu.js
+++ b/components/lib/menu/Menu.js
@@ -195,6 +195,7 @@ export const Menu = React.memo(React.forwardRef((props, ref) => {
 
     const createElement = () => {
         if (props.model) {
+            const otherProps = ObjectUtils.findDiffKeys(props, Menu.defaultProps);
             const className = classNames('p-menu p-component', {
                 'p-menu-overlay': props.popup
             }, props.className);
@@ -203,7 +204,7 @@ export const Menu = React.memo(React.forwardRef((props, ref) => {
             return (
                 <CSSTransition nodeRef={menuRef} classNames="p-connected-overlay" in={visibleState} timeout={{ enter: 120, exit: 100 }} options={props.transitionOptions}
                     unmountOnExit onEnter={onEnter} onEntered={onEntered} onExit={onExit} onExited={onExited}>
-                    <div ref={menuRef} id={props.id} className={className} style={props.style} onClick={onPanelClick}>
+                    <div ref={menuRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onPanelClick}>
                         <ul className="p-menu-list p-reset" role="menu">
                             {menuitems}
                         </ul>
diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js
index ec9d6cf97f..6910b3ccc3 100644
--- a/components/lib/menubar/Menubar.js
+++ b/components/lib/menubar/Menubar.js
@@ -104,6 +104,7 @@ export const Menubar = React.memo(React.forwardRef((props, ref) => {
         return button;
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Menubar.defaultProps);
     const className = classNames('p-menubar p-component', {
         'p-menubar-mobile-active': mobileActiveState
     }, props.className);
@@ -113,7 +114,7 @@ export const Menubar = React.memo(React.forwardRef((props, ref) => {
     const submenu = <MenubarSub ref={rootMenuRef} model={props.model} root mobileActive={mobileActiveState} onLeafClick={onLeafClick} />;
 
     return (
-        <div id={props.id} className={className} style={props.style}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             {start}
             {menuButton}
             {submenu}
diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js
index 9af1d3eb37..aad5c09395 100644
--- a/components/lib/message/Message.js
+++ b/components/lib/message/Message.js
@@ -24,6 +24,7 @@ export const Message = React.memo(React.forwardRef((props, ref) => {
         )
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Message.defaultProps);
     const className = classNames('p-inline-message p-component', {
         'p-inline-message-info': props.severity === 'info',
         'p-inline-message-warn': props.severity === 'warn',
@@ -34,7 +35,7 @@ export const Message = React.memo(React.forwardRef((props, ref) => {
     const content = createContent();
 
     return (
-        <div id={props.id} aria-live="polite" className={className} style={props.style} role="alert">
+        <div id={props.id} className={className} style={props.style} {...otherProps} role="alert" aria-live="polite">
             {content}
         </div>
     )
diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js
index b03d66dd4e..e17bc93dfb 100644
--- a/components/lib/messages/Messages.js
+++ b/components/lib/messages/Messages.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TransitionGroup } from 'react-transition-group';
 import { CSSTransition } from '../csstransition/CSSTransition';
+import { ObjectUtils } from '../utils/Utils';
 import { UIMessage } from './UIMessage';
 
 let messageIdx = 0;
@@ -46,8 +47,10 @@ export const Messages = React.memo(React.forwardRef((props, ref) => {
         clear
     }));
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Messages.defaultProps);
+
     return (
-        <div id={props.id} className={props.className} style={props.style}>
+        <div id={props.id} className={props.className} style={props.style} {...otherProps}>
             <TransitionGroup>
                 {
                     messagesState.map((message) => {
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index a8b5fe5357..eb2c45fa0b 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -540,6 +540,7 @@ export const MultiSelect = React.memo(React.forwardRef((props, ref) => {
     const visibleOptions = getVisibleOptions();
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+    const otherProps = ObjectUtils.findDiffKeys(props, MultiSelect.defaultProps);
     const className = classNames('p-multiselect p-component p-inputwrapper', {
         'p-multiselect-chip': props.display === 'chip',
         'p-disabled': props.disabled,
@@ -553,7 +554,7 @@ export const MultiSelect = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <div {...ObjectUtils.findDiffKeys(props, MultiSelect.defaultProps)} ref={elementRef} id={props.id} className={className} onClick={onClick} style={props.style}>
+            <div ref={elementRef} id={props.id} style={props.style} className={className} {...otherProps} onClick={onClick}>
                 <div className="p-hidden-accessible">
                     <input ref={inputRef} id={props.inputId} name={props.name} readOnly type="text" onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown}
                         role="listbox" aria-labelledby={props.ariaLabelledBy} aria-expanded={overlayVisibleState} disabled={props.disabled} tabIndex={props.tabIndex} />
diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
index f9d0a8ecfc..b8a4da5d6b 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckbox.js
+++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -99,6 +99,7 @@ export const MultiStateCheckbox = React.memo(React.forwardRef((props, ref) => {
     const { option: selectedOption, index: selectedOptionIndex } = getSelectedOptionMap();
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+    const otherProps = ObjectUtils.findDiffKeys(props, MultiStateCheckbox.defaultProps);
     const className = classNames('p-multistatecheckbox p-checkbox p-component', props.className);
     const boxClassName = classNames('p-checkbox-box', {
         'p-highlight': !!selectedOption,
@@ -109,7 +110,7 @@ export const MultiStateCheckbox = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <div {...ObjectUtils.findDiffKeys(props, MultiStateCheckbox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
+            <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onClick}>
                 <div className="p-hidden-accessible">
                     <input ref={inputRef} type="checkbox" aria-labelledby={props.ariaLabelledBy} id={props.inputId} name={props.name}
                         onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} readOnly={props.readOnly} defaultChecked={!!selectedOption} />
diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
index 827a76bf09..758aa6466f 100644
--- a/components/lib/orderlist/OrderList.js
+++ b/components/lib/orderlist/OrderList.js
@@ -110,10 +110,11 @@ export const OrderList = React.memo(React.forwardRef((props, ref) => {
         }
     });
 
+    const otherProps = ObjectUtils.findDiffKeys(props, OrderList.defaultProps);
     const className = classNames('p-orderlist p-component', props.className);
 
     return (
-        <div ref={elementRef} id={props.id} className={className} style={props.style}>
+        <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
             <OrderListControls value={props.value} selection={selectionState} onReorder={onReorder} dataKey={props.dataKey} />
             <OrderListSubList value={props.value} selection={selectionState} onItemClick={onItemClick} onItemKeyDown={onItemKeyDown}
                 itemTemplate={props.itemTemplate} header={props.header} listStyle={props.listStyle} dataKey={props.dataKey}
diff --git a/components/lib/organizationchart/OrganizationChart.js b/components/lib/organizationchart/OrganizationChart.js
index e262d5ffd2..5b192c03fa 100644
--- a/components/lib/organizationchart/OrganizationChart.js
+++ b/components/lib/organizationchart/OrganizationChart.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames, DomHandler } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 import { OrganizationChartNode } from './OrganizationChartNode';
 
 export const OrganizationChart = React.memo(React.forwardRef((props, ref) => {
@@ -61,10 +61,11 @@ export const OrganizationChart = React.memo(React.forwardRef((props, ref) => {
         return findIndexInSelection(node) !== -1;
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, OrganizationChart.defaultProps);
     const className = classNames('p-organizationchart p-component', props.className);
 
     return (
-        <div id={props.id} style={props.style} className={className}>
+        <div id={props.id} style={props.style} className={className} {...otherProps}>
             <OrganizationChartNode node={root} nodeTemplate={props.nodeTemplate} selectionMode={props.selectionMode} onNodeClick={onNodeClick} isSelected={isSelected} />
         </div>
     )
diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js
index 2ed522ceba..d1a929cdb0 100644
--- a/components/lib/overlaypanel/OverlayPanel.js
+++ b/components/lib/overlaypanel/OverlayPanel.js
@@ -5,7 +5,7 @@ import { useMountEffect, useOverlayListener, useUnmountEffect } from '../hooks/H
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, DomHandler, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
 
 export const OverlayPanel = React.forwardRef((props, ref) => {
     const [visibleState, setVisibleState] = React.useState(false);
@@ -193,13 +193,14 @@ export const OverlayPanel = React.forwardRef((props, ref) => {
     }
 
     const createElement = () => {
+        const otherProps = ObjectUtils.findDiffKeys(props, OverlayPanel.defaultProps);
         const className = classNames('p-overlaypanel p-component', props.className);
         const closeIcon = createCloseIcon();
 
         return (
             <CSSTransition nodeRef={overlayRef} classNames="p-overlaypanel" in={visibleState} timeout={{ enter: 120, exit: 100 }} options={props.transitionOptions}
                 unmountOnExit onEnter={onEnter} onEntered={onEntered} onExit={onExit} onExited={onExited}>
-                <div ref={overlayRef} id={props.id} className={className} style={props.style} onClick={onPanelClick}>
+                <div ref={overlayRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onPanelClick}>
                     <div className="p-overlaypanel-content" onClick={onContentClick} onMouseDown={onContentClick}>
                         {props.children}
                     </div>
diff --git a/components/lib/paginator/Paginator.js b/components/lib/paginator/Paginator.js
index 30538b7ed0..7e4b091848 100644
--- a/components/lib/paginator/Paginator.js
+++ b/components/lib/paginator/Paginator.js
@@ -181,6 +181,7 @@ export const Paginator = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
     else {
+        const otherProps = ObjectUtils.findDiffKeys(props, Paginator.defaultProps);
         const className = classNames('p-paginator p-component', props.className);
         const leftContent = ObjectUtils.getJSXElement(props.leftContent, props);
         const rightContent = ObjectUtils.getJSXElement(props.rightContent, props);
@@ -190,7 +191,7 @@ export const Paginator = React.memo(React.forwardRef((props, ref) => {
         const rightElement = rightContent && <div className="p-paginator-right-content">{rightContent}</div>;
 
         return (
-            <div className={className} style={props.style}>
+            <div className={className} style={props.style} {...otherProps}>
                 {leftElement}
                 {elements}
                 {rightElement}
diff --git a/components/lib/panel/Panel.js b/components/lib/panel/Panel.js
index 083d819ddb..164d0b87a6 100644
--- a/components/lib/panel/Panel.js
+++ b/components/lib/panel/Panel.js
@@ -120,6 +120,7 @@ export const Panel = React.forwardRef((props, ref) => {
         )
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Panel.defaultProps);
     const className = classNames('p-panel p-component', {
         'p-panel-toggleable': props.toggleable
     }, props.className);
@@ -127,7 +128,7 @@ export const Panel = React.forwardRef((props, ref) => {
     const content = createContent();
 
     return (
-        <div id={props.id} className={className} style={props.style}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             {header}
             {content}
         </div>
diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
index 251407e1c1..352ec5ecec 100644
--- a/components/lib/panelmenu/PanelMenu.js
+++ b/components/lib/panelmenu/PanelMenu.js
@@ -136,11 +136,12 @@ export const PanelMenu = React.memo(React.forwardRef((props, ref) => {
         return props.model ? props.model.map(createPanel) : null;
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, PanelMenu.defaultProps);
     const className = classNames('p-panelmenu p-component', props.className);
     const panels = createPanels();
 
     return (
-        <div id={props.id} className={className} style={props.style}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             {panels}
         </div>
     )
diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
index 72dcaf997f..8531635995 100644
--- a/components/lib/password/Password.js
+++ b/components/lib/password/Password.js
@@ -282,7 +282,6 @@ export const Password = React.memo(React.forwardRef((props, ref) => {
         return <Portal element={panel} appendTo={props.appendTo} />;
     }
 
-    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-password p-component p-inputwrapper', {
         'p-inputwrapper-filled': isFilled,
         'p-inputwrapper-focus': focusedState,
diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js
index 95ea00522a..b27d624e20 100644
--- a/components/lib/picklist/PickList.js
+++ b/components/lib/picklist/PickList.js
@@ -148,10 +148,11 @@ export const PickList = React.memo(React.forwardRef((props, ref) => {
         }
     });
 
+    const otherProps = ObjectUtils.findDiffKeys(props, PickList.defaultProps);
     const className = classNames('p-picklist p-component', props.className);
 
     return (
-        <div id={props.id} className={className} style={props.style}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             {props.showSourceControls && <PickListControls list={props.source} selection={sourceSelection} onReorder={onSourceReorder} className="p-picklist-source-controls" dataKey={props.dataKey} />}
 
             <PickListSubList ref={sourceListElementRef} list={props.source} selection={sourceSelection} onSelectionChange={(e) => onSelectionChange(e, 'sourceSelection', props.onSourceSelectionChange)} itemTemplate={props.itemTemplate}
diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js
index 99d2151cc1..c03c98963e 100644
--- a/components/lib/progressbar/ProgressBar.js
+++ b/components/lib/progressbar/ProgressBar.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames } from '../utils/Utils';
+import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const ProgressBar = React.memo(React.forwardRef((props, ref) => {
 
@@ -13,11 +13,12 @@ export const ProgressBar = React.memo(React.forwardRef((props, ref) => {
     }
 
     const createDeterminate = () => {
+        const otherProps = ObjectUtils.findDiffKeys(props, ProgressBar.defaultProps);
         const className = classNames('p-progressbar p-component p-progressbar-determinate', props.className);
         const label = createLabel();
 
         return (
-            <div role="progressbar" id={props.id} className={className} style={props.style} aria-valuemin="0" aria-valuenow={props.value} aria-valuemax="100" aria-label={props.value}>
+            <div role="progressbar" id={props.id} className={className} style={props.style} aria-valuemin="0" aria-valuenow={props.value} aria-valuemax="100" aria-label={props.value} {...otherProps}>
                 <div className="p-progressbar-value p-progressbar-value-animate" style={{ width: props.value + '%', display: 'block', backgroundColor: props.color }}></div>
                 {label}
             </div>
@@ -25,10 +26,11 @@ export const ProgressBar = React.memo(React.forwardRef((props, ref) => {
     }
 
     const createIndeterminate = () => {
+        const otherProps = ObjectUtils.findDiffKeys(props, ProgressBar.defaultProps);
         const className = classNames('p-progressbar p-component p-progressbar-indeterminate', props.className);
 
         return (
-            <div role="progressbar" id={props.id} className={className} style={props.style}>
+            <div role="progressbar" id={props.id} className={className} style={props.style} {...otherProps}>
                 <div className="p-progressbar-indeterminate-container">
                     <div className="p-progressbar-value p-progressbar-value-animate" style={{ backgroundColor: props.color }}></div>
                 </div>
diff --git a/components/lib/progressspinner/ProgressSpinner.js b/components/lib/progressspinner/ProgressSpinner.js
index 63e7bfc2bf..86dec7ac3c 100644
--- a/components/lib/progressspinner/ProgressSpinner.js
+++ b/components/lib/progressspinner/ProgressSpinner.js
@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { classNames } from '../utils/Utils';
+import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const ProgressSpinner = React.memo(React.forwardRef((props, ref) => {
+    const otherProps = ObjectUtils.findDiffKeys(props, ProgressSpinner.defaultProps);
     const className = classNames('p-progress-spinner', props.className);
 
     return (
-        <div id={props.id} style={props.style} className={className} role="alert" aria-busy>
+        <div id={props.id} style={props.style} className={className} role="alert" aria-busy {...otherProps}>
             <svg className="p-progress-spinner-svg" viewBox="25 25 50 50" style={{ animationDuration: props.animationDuration }}>
                 <circle className="p-progress-spinner-circle" cx="50" cy="50" r="20" fill={props.fill} strokeWidth={props.strokeWidth} strokeMiterlimit="10" />
             </svg>
diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js
index cc270b1028..c591a6adfa 100644
--- a/components/lib/radiobutton/RadioButton.js
+++ b/components/lib/radiobutton/RadioButton.js
@@ -56,6 +56,7 @@ export const RadioButton = React.memo(React.forwardRef((props, ref) => {
     }));
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+    const otherProps = ObjectUtils.findDiffKeys(props, RadioButton.defaultProps);
     const className = classNames('p-radiobutton p-component', {
         'p-radiobutton-checked': props.checked,
         'p-radiobutton-disabled': props.disabled,
@@ -69,7 +70,7 @@ export const RadioButton = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <div {...ObjectUtils.findDiffKeys(props, RadioButton.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
+            <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onClick}>
                 <div className="p-hidden-accessible">
                     <input ref={inputRef} id={props.inputId} type="radio" aria-labelledby={props.ariaLabelledBy} name={props.name} defaultChecked={props.checked}
                         onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} required={props.required} tabIndex={props.tabIndex} />
diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js
index 294b247eb1..2a744e121d 100644
--- a/components/lib/rating/Rating.js
+++ b/components/lib/rating/Rating.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Tooltip } from '../tooltip/Tooltip';
-import { classNames } from '../utils/Utils';
+import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Rating = React.memo(React.forwardRef((props, ref) => {
     const elementRef = React.useRef(null);
@@ -77,6 +77,7 @@ export const Rating = React.memo(React.forwardRef((props, ref) => {
     }
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+    const otherProps = ObjectUtils.findDiffKeys(props, Rating.defaultProps);
     const className = classNames('p-rating', {
         'p-disabled': props.disabled,
         'p-readonly': props.readOnly
@@ -86,7 +87,7 @@ export const Rating = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <div {...ObjectUtils.findDiffKeys(props, Rating.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style}>
+            <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
                 {cancelIcon}
                 {stars}
             </div>
diff --git a/components/lib/row/Row.js b/components/lib/row/Row.js
index ab8f18e59b..c8904c94e5 100644
--- a/components/lib/row/Row.js
+++ b/components/lib/row/Row.js
@@ -1,6 +1,11 @@
 import * as React from 'react';
+import { ObjectUtils } from '../utils/Utils';
 
-export const Row = (props) => <tr className={props.className} style={props.style}>{props.children}</tr>
+export const Row = (props) => {
+    const otherProps = ObjectUtils.findDiffKeys(props, Row.defaultProps);
+
+    return <tr className={props.className} style={props.style} {...otherProps}>{props.children}</tr>
+}
 
 Row.displayName = 'Row';
 Row.defaultProps = {
diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js
index 24eaaa7bc5..7bb8ca3dcf 100644
--- a/components/lib/scrollpanel/ScrollPanel.js
+++ b/components/lib/scrollpanel/ScrollPanel.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMountEffect, useUnmountEffect } from '../hooks/Hooks';
-import { classNames, DomHandler } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const ScrollPanel = React.forwardRef((props, ref) => {
     const containerRef = React.useRef(null);
@@ -152,10 +152,11 @@ export const ScrollPanel = React.forwardRef((props, ref) => {
         refresh
     }));
 
+    const otherProps = ObjectUtils.findDiffKeys(props, ScrollPanel.defaultProps);
     const className = classNames('p-scrollpanel p-component', props.className);
 
     return (
-        <div ref={containerRef} id={props.id} className={className} style={props.style}>
+        <div ref={containerRef} id={props.id} className={className} style={props.style} {...otherProps}>
             <div className="p-scrollpanel-wrapper">
                 <div ref={contentRef} className="p-scrollpanel-content" onScroll={moveBar} onMouseEnter={moveBar}>
                     {props.children}
diff --git a/components/lib/scrolltop/ScrollTop.js b/components/lib/scrolltop/ScrollTop.js
index adc9015bd7..21f56b50ab 100644
--- a/components/lib/scrolltop/ScrollTop.js
+++ b/components/lib/scrolltop/ScrollTop.js
@@ -3,7 +3,7 @@ import PrimeReact from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useEventListener, useMountEffect, useUnmountEffect } from '../hooks/Hooks';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, DomHandler, IconUtils, ZIndexUtils } from '../utils/Utils';
+import { classNames, DomHandler, IconUtils, ObjectUtils, ZIndexUtils } from '../utils/Utils';
 
 export const ScrollTop = React.memo(React.forwardRef((props, ref) => {
     const [visibleState, setVisibleState] = React.useState(false);
@@ -60,6 +60,7 @@ export const ScrollTop = React.memo(React.forwardRef((props, ref) => {
         ZIndexUtils.clear(scrollElementRef.current);
     });
 
+    const otherProps = ObjectUtils.findDiffKeys(props, ScrollTop.defaultProps);
     const className = classNames('p-scrolltop p-link p-component', {
         'p-scrolltop-sticky': props.target !== 'window'
     }, props.className);
@@ -68,7 +69,7 @@ export const ScrollTop = React.memo(React.forwardRef((props, ref) => {
         <>
             <CSSTransition nodeRef={scrollElementRef} classNames="p-scrolltop" in={visibleState} timeout={{ enter: 150, exit: 150 }} options={props.transitionOptions}
                 unmountOnExit onEnter={onEnter} onEntered={onEntered} onExited={onExited}>
-                <button ref={scrollElementRef} type="button" className={className} style={props.style} onClick={onClick}>
+                <button ref={scrollElementRef} type="button" className={className} style={props.style} {...otherProps} onClick={onClick}>
                     {IconUtils.getJSXIcon(props.icon, { className: 'p-scrolltop-icon' }, { props })}
                     <Ripple />
                 </button>
diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js
index 33cbc3773a..7ca013a15b 100644
--- a/components/lib/selectbutton/SelectButton.js
+++ b/components/lib/selectbutton/SelectButton.js
@@ -91,12 +91,13 @@ export const SelectButton = React.memo(React.forwardRef((props, 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);
     const items = createItems();
 
     return (
         <>
-            <div {...ObjectUtils.findDiffKeys(props, SelectButton.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} role="group">
+            <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} role="group">
                 {items}
             </div>
             {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js
index d552f64954..eb2a864854 100644
--- a/components/lib/sidebar/Sidebar.js
+++ b/components/lib/sidebar/Sidebar.js
@@ -131,6 +131,7 @@ export const Sidebar = React.forwardRef((props, ref) => {
     }
 
     const createElement = () => {
+        const otherProps = ObjectUtils.findDiffKeys(props, Sidebar.defaultProps);
         const className = classNames('p-sidebar p-component', props.className);
         const maskClassName = classNames('p-sidebar-mask', {
             'p-component-overlay p-component-overlay-enter': props.modal,
@@ -151,7 +152,7 @@ export const Sidebar = React.forwardRef((props, ref) => {
             <div ref={maskRef} style={props.maskStyle} className={maskClassName} onMouseDown={onMaskClick}>
                 <CSSTransition nodeRef={sidebarRef} classNames="p-sidebar" in={visibleState} timeout={transitionTimeout} options={props.transitionOptions}
                     unmountOnExit onEntered={onEntered} onExiting={onExiting} onExited={onExited}>
-                    <div ref={sidebarRef} id={props.id} className={className} style={props.style} role="complementary">
+                    <div ref={sidebarRef} id={props.id} className={className} style={props.style} {...otherProps} role="complementary">
                         <div className="p-sidebar-header">
                             {icons}
                             {closeIcon}
diff --git a/components/lib/skeleton/Skeleton.js b/components/lib/skeleton/Skeleton.js
index edc112512b..7ed47f2e96 100644
--- a/components/lib/skeleton/Skeleton.js
+++ b/components/lib/skeleton/Skeleton.js
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { classNames } from '../utils/Utils';
+import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Skeleton = React.memo(React.forwardRef((props, ref) => {
+    const otherProps = ObjectUtils.findDiffKeys(props, Skeleton.defaultProps);
     const style = props.size ?
         { width: props.size, height: props.size, borderRadius: props.borderRadius } :
         { width: props.width, height: props.height, borderRadius: props.borderRadius };
@@ -10,7 +11,7 @@ export const Skeleton = React.memo(React.forwardRef((props, ref) => {
         'p-skeleton-none': props.animation === 'none'
     }, props.className);
 
-    return <div style={style} className={className}></div>
+    return <div style={style} className={className} {...otherProps}></div>
 }));
 
 Skeleton.displayName = 'Skeleton';
diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js
index 4e39488583..9d04b0408f 100644
--- a/components/lib/slidemenu/SlideMenu.js
+++ b/components/lib/slidemenu/SlideMenu.js
@@ -4,7 +4,7 @@ import { CSSTransition } from '../csstransition/CSSTransition';
 import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
-import { classNames, DomHandler, ZIndexUtils } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils';
 import { SlideMenuSub } from './SlideMenuSub';
 
 export const SlideMenu = React.memo(React.forwardRef((props, ref) => {
@@ -105,6 +105,7 @@ export const SlideMenu = React.memo(React.forwardRef((props, ref) => {
     }
 
     const createElement = () => {
+        const otherProps = ObjectUtils.findDiffKeys(props, SlideMenu.defaultProps);
         const className = classNames('p-slidemenu p-component', {
             'p-slidemenu-overlay': props.popup
         }, props.className);
@@ -114,7 +115,7 @@ export const SlideMenu = React.memo(React.forwardRef((props, ref) => {
         return (
             <CSSTransition nodeRef={menuRef} classNames="p-connected-overlay" in={!props.popup || visibleState} timeout={{ enter: 120, exit: 100 }} options={props.transitionOptions}
                 unmountOnExit onEnter={onEnter} onEntered={onEntered} onExit={onExit} onExited={onExited}>
-                <div ref={menuRef} id={props.id} className={className} style={props.style} onClick={onPanelClick}>
+                <div ref={menuRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onPanelClick}>
                     <div className="p-slidemenu-wrapper" style={wrapperStyle}>
                         <div className="p-slidemenu-content" ref={slideMenuContent}>
                             <SlideMenuSub model={props.model} root index={0} menuWidth={props.menuWidth} effectDuration={props.effectDuration}
diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js
index 4024c05a7e..a1c443e01a 100644
--- a/components/lib/slider/Slider.js
+++ b/components/lib/slider/Slider.js
@@ -242,6 +242,7 @@ export const Slider = React.memo(React.forwardRef((props, ref) => {
         )
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Slider.defaultProps);
     const className = classNames('p-slider p-component', props.className, {
         'p-disabled': props.disabled,
         'p-slider-horizontal': horizontal,
@@ -250,7 +251,7 @@ export const Slider = React.memo(React.forwardRef((props, ref) => {
     const content = props.range ? createRangeSlider() : createSingleSlider();
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, Slider.defaultProps)} ref={elementRef} id={props.id} style={props.style} className={className} onClick={onBarClick}>
+        <div ref={elementRef} id={props.id} style={props.style} className={className} {...otherProps} onClick={onBarClick}>
             {content}
         </div>
     )
diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js
index 22dd68c159..eceecf034e 100644
--- a/components/lib/speeddial/SpeedDial.js
+++ b/components/lib/speeddial/SpeedDial.js
@@ -235,6 +235,7 @@ export const SpeedDial = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, SpeedDial.defaultProps);
     const className = classNames(`p-speeddial p-component p-speeddial-${props.type}`, {
         [`p-speeddial-direction-${props.direction}`]: props.type !== 'circle',
         'p-speeddial-opened': visible,
@@ -246,7 +247,7 @@ export const SpeedDial = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <React.Fragment>
-            <div ref={elementRef} id={props.id} className={className} style={props.style}>
+            <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
                 {button}
                 {list}
             </div>
diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js
index 4e5d42f2cb..8bf01deb88 100644
--- a/components/lib/splitbutton/SplitButton.js
+++ b/components/lib/splitbutton/SplitButton.js
@@ -95,6 +95,7 @@ export const SplitButton = React.memo(React.forwardRef((props, ref) => {
     }
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+    const otherProps = ObjectUtils.findDiffKeys(props, SplitButton.defaultProps);
     const className = classNames('p-splitbutton p-component', props.className, { 'p-disabled': props.disabled });
     const buttonClassName = classNames('p-splitbutton-defaultbutton', props.buttonClassName);
     const menuButtonClassName = classNames('p-splitbutton-menubutton', props.menuButtonClassName);
@@ -104,7 +105,7 @@ export const SplitButton = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <div id={idState} className={className} style={props.style} ref={elementRef}>
+            <div ref={elementRef} id={idState} className={className} style={props.style} {...otherProps}>
                 <Button ref={defaultButtonRef} type="button" className={buttonClassName} icon={props.icon} label={props.label} onClick={props.onClick} disabled={props.disabled} tabIndex={props.tabIndex}>
                     {buttonContent}
                 </Button>
diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js
index b4f5e7a3cf..12e0578dc4 100644
--- a/components/lib/splitter/Splitter.js
+++ b/components/lib/splitter/Splitter.js
@@ -199,6 +199,7 @@ export const Splitter = React.memo(React.forwardRef((props, ref) => {
     });
 
     const createPanel = (panel, index) => {
+        const otherProps = ObjectUtils.findDiffKeys(panel.props, SplitterPanel.defaultProps);
         const panelClassName = classNames('p-splitter-panel', panel.props.className);
         const gutterStyle = props.layout === 'horizontal' ? { width: props.gutterSize + 'px' } : { height: props.gutterSize + 'px' }
         const gutter = (index !== props.children.length - 1) && (
@@ -210,7 +211,7 @@ export const Splitter = React.memo(React.forwardRef((props, ref) => {
 
         return (
             <React.Fragment>
-                <div key={index} className={panelClassName} style={panel.props.style}>
+                <div key={index} className={panelClassName} style={panel.props.style} {...otherProps}>
                     {panel.props.children}
                 </div>
                 {gutter}
@@ -223,11 +224,12 @@ export const Splitter = React.memo(React.forwardRef((props, ref) => {
         return React.Children.map(props.children, createPanel);
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Splitter.defaultProps);
     const className = classNames(`p-splitter p-component p-splitter-${props.layout}`, props.className);
     const panels = createPanels();
 
     return (
-        <div ref={elementRef} id={props.id} className={className} style={props.style}>
+        <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
             {panels}
         </div>
     )
diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js
index b7f651416c..0ad527ceb9 100644
--- a/components/lib/steps/Steps.js
+++ b/components/lib/steps/Steps.js
@@ -84,13 +84,14 @@ export const Steps = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Steps.defaultProps);
     const className = classNames('p-steps p-component', {
         'p-readonly': props.readOnly
     }, props.className);
     const items = createItems();
 
     return (
-        <div id={props.id} className={className} style={props.style}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             {items}
         </div>
     )
diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
index 81d6710938..cc16e9818a 100644
--- a/components/lib/tabmenu/TabMenu.js
+++ b/components/lib/tabmenu/TabMenu.js
@@ -99,17 +99,18 @@ export const TabMenu = React.memo(React.forwardRef((props, ref) => {
     }
 
     if (props.model) {
+        const otherProps = ObjectUtils.findDiffKeys(props, TabMenu.defaultProps);
         const className = classNames('p-tabmenu p-component', props.className);
         const items = createItems();
 
         return (
-            <div id={props.id} className={className} style={props.style}>
+            <div id={props.id} className={className} style={props.style} {...otherProps}>
                 <ul ref={navRef} className="p-tabmenu-nav p-reset" role="tablist">
                     {items}
                     <li ref={inkbarRef} className="p-tabmenu-ink-bar"></li>
                 </ul>
             </div>
-        );
+        )
     }
 
     return null;
diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js
index 9bce2ac630..98545f9c58 100644
--- a/components/lib/tabview/TabView.js
+++ b/components/lib/tabview/TabView.js
@@ -233,9 +233,10 @@ export const TabView = React.forwardRef((props, ref) => {
                 const className = classNames(tab.props.contentClassName, tab.props.className, 'p-tabview-panel', { 'p-hidden': !selected });
                 const contentId = idState + '_content_' + index;
                 const ariaLabelledBy = idState + '_header_' + index;
+                const otherProps = ObjectUtils.findDiffKeys(tab.props, TabPanel.defaultProps);
 
                 return (
-                    <div id={contentId} aria-labelledby={ariaLabelledBy} aria-hidden={!selected} className={className} style={style} role="tabpanel">
+                    <div {...otherProps} id={contentId} aria-labelledby={ariaLabelledBy} aria-hidden={!selected} className={className} style={style} role="tabpanel">
                         {!props.renderActiveOnly ? tab.props.children : (selected && tab.props.children)}
                     </div>
                 )
@@ -273,6 +274,7 @@ export const TabView = React.forwardRef((props, ref) => {
         }
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, TabView.defaultProps);
     const className = classNames('p-tabview p-component', {
         'p-tabview-scrollable': props.scrollable
     }, props.className);
@@ -282,7 +284,7 @@ export const TabView = React.forwardRef((props, ref) => {
     const nextButton = createNextButton();
 
     return (
-        <div className={className}>
+        <div className={className} {...otherProps}>
             <div className="p-tabview-nav-container">
                 {prevButton}
                 {navigator}
diff --git a/components/lib/tag/Tag.js b/components/lib/tag/Tag.js
index 481a85fce5..6e56c0bdec 100644
--- a/components/lib/tag/Tag.js
+++ b/components/lib/tag/Tag.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { classNames, IconUtils } from '../utils/Utils';
+import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const Tag = React.forwardRef((props, ref) => {
-
+    const otherProps = ObjectUtils.findDiffKeys(props, Tag.defaultProps);
     const className = classNames('p-tag p-component', {
         [`p-tag-${props.severity}`]: props.severity !== null,
         'p-tag-rounded': props.rounded
@@ -10,7 +10,7 @@ export const Tag = React.forwardRef((props, ref) => {
     const icon = IconUtils.getJSXIcon(props.icon, { className: 'p-tag-icon' }, { props });
 
     return (
-        <span className={className} style={props.style}>
+        <span className={className} style={props.style} {...otherProps}>
             {icon}
             <span className="p-tag-value">{props.value}</span>
             <span>{props.children}</span>
diff --git a/components/lib/terminal/Terminal.js b/components/lib/terminal/Terminal.js
index 9e176f2386..509e0ec108 100644
--- a/components/lib/terminal/Terminal.js
+++ b/components/lib/terminal/Terminal.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TerminalService } from '../terminalservice/TerminalService';
-import { classNames } from '../utils/Utils';
+import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Terminal = React.memo(React.forwardRef((props, ref) => {
     const [commandTextState, setCommandTextState] = React.useState('');
@@ -128,13 +128,14 @@ export const Terminal = React.memo(React.forwardRef((props, ref) => {
         )
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Terminal.defaultProps);
     const className = classNames('p-terminal p-component', props.className);
     const welcomeMessage = createWelcomeMessage();
     const content = createContent();
     const prompt = createPromptContainer();
 
     return (
-        <div ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
+        <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onClick}>
             {welcomeMessage}
             {content}
             {prompt}
diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js
index 8c0cea6dff..a3e5be09cc 100644
--- a/components/lib/tieredmenu/TieredMenu.js
+++ b/components/lib/tieredmenu/TieredMenu.js
@@ -4,7 +4,7 @@ import { CSSTransition } from '../csstransition/CSSTransition';
 import { useOverlayListener, useUnmountEffect } from '../hooks/Hooks';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
-import { classNames, DomHandler, ZIndexUtils } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils';
 import { TieredMenuSub } from './TieredMenuSub';
 
 export const TieredMenu = React.memo(React.forwardRef((props, ref) => {
@@ -77,6 +77,7 @@ export const TieredMenu = React.memo(React.forwardRef((props, ref) => {
     }));
 
     const createElement = () => {
+        const otherProps = ObjectUtils.findDiffKeys(props, TieredMenu.defaultProps);
         const className = classNames('p-tieredmenu p-component', {
             'p-tieredmenu-overlay': props.popup
         }, props.className);
@@ -84,7 +85,7 @@ export const TieredMenu = React.memo(React.forwardRef((props, ref) => {
         return (
             <CSSTransition nodeRef={menuRef} classNames="p-connected-overlay" in={visibleState} timeout={{ enter: 120, exit: 100 }} options={props.transitionOptions}
                 unmountOnExit onEnter={onEnter} onEntered={onEntered} onExit={onExit} onExited={onExited}>
-                <div ref={menuRef} id={props.id} className={className} style={props.style} onClick={onPanelClick}>
+                <div ref={menuRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onPanelClick}>
                     <TieredMenuSub model={props.model} root popup={props.popup} />
                 </div>
             </CSSTransition>
diff --git a/components/lib/timeline/Timeline.js b/components/lib/timeline/Timeline.js
index 7e83333b4e..268d6d179d 100644
--- a/components/lib/timeline/Timeline.js
+++ b/components/lib/timeline/Timeline.js
@@ -31,6 +31,7 @@ export const Timeline = React.memo(React.forwardRef((props, ref) => {
         });
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Timeline.defaultProps);
     const className = classNames('p-timeline p-component', {
         [`p-timeline-${props.align}`]: true,
         [`p-timeline-${props.layout}`]: true
@@ -39,7 +40,7 @@ export const Timeline = React.memo(React.forwardRef((props, ref) => {
     const events = createEvents();
 
     return (
-        <div id={props.id} className={className} style={props.style}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             {events}
         </div>
     )
diff --git a/components/lib/toast/Toast.js b/components/lib/toast/Toast.js
index 9a5c79490c..c1cf4a9724 100644
--- a/components/lib/toast/Toast.js
+++ b/components/lib/toast/Toast.js
@@ -4,7 +4,7 @@ import PrimeReact from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useUnmountEffect } from '../hooks/Hooks';
 import { Portal } from '../portal/Portal';
-import { classNames, ZIndexUtils } from '../utils/Utils';
+import { classNames, ObjectUtils, ZIndexUtils } from '../utils/Utils';
 import { ToastMessage } from './ToastMessage';
 
 let messageIdx = 0;
@@ -70,10 +70,11 @@ export const Toast = React.memo(React.forwardRef((props, ref) => {
     }));
 
     const createElement = () => {
+        const otherProps = ObjectUtils.findDiffKeys(props, Toast.defaultProps);
         const className = classNames('p-toast p-component p-toast-' + props.position, props.className);
 
         return (
-            <div ref={containerRef} id={props.id} className={className} style={props.style}>
+            <div ref={containerRef} id={props.id} className={className} style={props.style} {...otherProps}>
                 <TransitionGroup>
                     {
                         messagesState.map((message) => {
diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js
index b64dc7b638..caa36da078 100644
--- a/components/lib/togglebutton/ToggleButton.js
+++ b/components/lib/togglebutton/ToggleButton.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Ripple } from '../ripple/Ripple';
 import { Tooltip } from '../tooltip/Tooltip';
-import { classNames, IconUtils } from '../utils/Utils';
+import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const ToggleButton = React.memo(React.forwardRef((props, ref) => {
     const elementRef = React.useRef(null);
@@ -48,6 +48,7 @@ export const ToggleButton = React.memo(React.forwardRef((props, ref) => {
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const tabIndex = !props.disabled && props.tabIndex;
+    const otherProps = ObjectUtils.findDiffKeys(props, ToggleButton.defaultProps);
     const className = classNames('p-button p-togglebutton p-component', {
         'p-button-icon-only': hasIcon && !hasLabel,
         'p-highlight': props.checked,
@@ -57,7 +58,7 @@ export const ToggleButton = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <div {...ObjectUtils.findDiffKeys(props, ToggleButton.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style}
+            <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}
                 onClick={toggle} onFocus={props.onFocus} onBlur={props.onBlur} onKeyDown={onKeyDown}
                 tabIndex={tabIndex} aria-labelledby={props.ariaLabelledBy}>
                 {iconElement}
diff --git a/components/lib/toolbar/Toolbar.js b/components/lib/toolbar/Toolbar.js
index d7345e888e..1e161c6d4e 100644
--- a/components/lib/toolbar/Toolbar.js
+++ b/components/lib/toolbar/Toolbar.js
@@ -2,12 +2,13 @@ import * as React from 'react';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Toolbar = React.memo(React.forwardRef((props, ref) => {
+    const otherProps = ObjectUtils.findDiffKeys(props, Toolbar.defaultProps);
     const toolbarClass = classNames('p-toolbar p-component', props.className);
     const left = ObjectUtils.getJSXElement(props.left, props);
     const right = ObjectUtils.getJSXElement(props.right, props);
 
     return (
-        <div id={props.id} className={toolbarClass} style={props.style} role="toolbar">
+        <div id={props.id} className={toolbarClass} style={props.style} role="toolbar" {...otherProps}>
             <div className="p-toolbar-group-left">
                 {left}
             </div>
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index 0c24b39485..c6e7bf3007 100644
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -433,6 +433,7 @@ export const Tooltip = React.memo(React.forwardRef((props, ref) => {
     }));
 
     const createElement = () => {
+        const otherProps = ObjectUtils.findDiffKeys(props, Tooltip.defaultProps);
         const tooltipClassName = classNames('p-tooltip p-component', {
             [`p-tooltip-${positionState}`]: true
         }, props.className);
@@ -440,7 +441,7 @@ export const Tooltip = React.memo(React.forwardRef((props, ref) => {
 
         return (
             <div id={props.id} ref={elementRef} className={tooltipClassName} style={props.style} role="tooltip" aria-hidden={visibleState}
-                onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+                {...otherProps} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
                 <div className="p-tooltip-arrow"></div>
                 <div ref={textRef} className="p-tooltip-text">
                     {empty && props.children}
diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js
index 4ded025d51..f1d042c7bc 100644
--- a/components/lib/tree/Tree.js
+++ b/components/lib/tree/Tree.js
@@ -402,6 +402,7 @@ export const Tree = React.memo(React.forwardRef((props, ref) => {
         )
     }
 
+    const otherProps = ObjectUtils.findDiffKeys(props, Tree.defaultProps);
     const className = classNames('p-tree p-component', props.className, {
         'p-tree-selectable': props.selectionMode,
         'p-tree-loading': props.loading,
@@ -413,7 +414,7 @@ export const Tree = React.memo(React.forwardRef((props, ref) => {
     const footer = createFooter();
 
     return (
-        <div id={props.id} className={className} style={props.style}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             {loader}
             {header}
             {content}
diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js
index 5a5e9abd93..4ac6bb4a27 100644
--- a/components/lib/treeselect/TreeSelect.js
+++ b/components/lib/treeselect/TreeSelect.js
@@ -452,6 +452,7 @@ export const TreeSelect = React.memo(React.forwardRef((props, ref) => {
 
     const selectedNodes = getSelectedNodes();
 
+    const otherProps = ObjectUtils.findDiffKeys(props, TreeSelect.defaultProps);
     const className = classNames('p-treeselect p-component p-inputwrapper', {
         'p-treeselect-chip': props.display === 'chip',
         'p-disabled': props.disabled,
@@ -467,7 +468,7 @@ export const TreeSelect = React.memo(React.forwardRef((props, ref) => {
     const footer = createFooter();
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, TreeSelect.defaultProps)} id={props.id} ref={elementRef} className={className} style={props.style} onClick={onClick}>
+        <div id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps} onClick={onClick}>
             {keyboardHelper}
             {labelElement}
             {dropdownIcon}
diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js
index df14826e54..1099edfbb2 100644
--- a/components/lib/treetable/TreeTable.js
+++ b/components/lib/treetable/TreeTable.js
@@ -907,6 +907,8 @@ export const TreeTable = React.forwardRef((props, ref) => {
     }
 
     const data = processData();
+
+    const otherProps = ObjectUtils.findDiffKeys(props, Toolbar.defaultProps);
     const className = classNames('p-treetable p-component', {
         'p-treetable-hoverable-rows': props.rowHover,
         'p-treetable-selectable': isRowSelectionMode(),
@@ -928,7 +930,7 @@ export const TreeTable = React.forwardRef((props, ref) => {
     const reorderIndicatorDown = props.reorderableColumns && <span ref={reorderIndicatorDownRef} className="pi pi-arrow-up p-datatable-reorder-indicator-down" style={{ position: 'absolute', display: 'none' }} />;
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, TreeTable.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} data-scrollselectors=".p-treetable-scrollable-body">
+        <div ref={elementRef} id={props.id} className={className} style={props.style} data-scrollselectors=".p-treetable-scrollable-body" {...otherProps}>
             {loader}
             {headerFacet}
             {paginatorTop}
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index 9e65383853..3ae7cea4ab 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -51,6 +51,7 @@ export const TriStateCheckbox = React.memo(React.forwardRef((props, ref) => {
     }, [inputRef, props.inputRef]);
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+    const otherProps = ObjectUtils.findDiffKeys(props, TriStateCheckbox.defaultProps);
     const className = classNames('p-tristatecheckbox p-checkbox p-component', props.className);
     const boxClassName = classNames('p-checkbox-box', {
         'p-highlight': (props.value || !props.value) && props.value !== null,
@@ -64,7 +65,7 @@ export const TriStateCheckbox = React.memo(React.forwardRef((props, ref) => {
 
     return (
         <>
-            <div {...ObjectUtils.findDiffKeys(props, TriStateCheckbox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
+            <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onClick}>
                 <div className="p-hidden-accessible">
                     <input ref={inputRef} type="checkbox" aria-labelledby={props.ariaLabelledBy} id={props.inputId} name={props.name}
                         onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} defaultChecked={props.value} />
diff --git a/components/lib/utils/ObjectUtils.js b/components/lib/utils/ObjectUtils.js
index e69c943b34..76f8374fbb 100644
--- a/components/lib/utils/ObjectUtils.js
+++ b/components/lib/utils/ObjectUtils.js
@@ -138,7 +138,7 @@ export default class ObjectUtils {
     static combinedRefs(innerRef, forwardRef) {
         if (innerRef && forwardRef) {
             if (typeof forwardRef === 'function') {
-                React.forwardRef(innerRef.current);
+                forwardRef(innerRef.current);
             }
             else {
                 forwardRef.current = innerRef.current;
diff --git a/components/lib/virtualscroller/VirtualScroller.js b/components/lib/virtualscroller/VirtualScroller.js
index 87bfd16371..1d0a6289b3 100644
--- a/components/lib/virtualscroller/VirtualScroller.js
+++ b/components/lib/virtualscroller/VirtualScroller.js
@@ -572,6 +572,7 @@ export const VirtualScroller = React.memo(React.forwardRef((props, ref) => {
         )
     }
     else {
+        const otherProps = ObjectUtils.findDiffKeys(props, VirtualScroller.defaultProps);
         const className = classNames('p-virtualscroller', {
             'p-both-scroll': both,
             'p-horizontal-scroll': horizontal
@@ -582,7 +583,7 @@ export const VirtualScroller = React.memo(React.forwardRef((props, ref) => {
         const spacer = createSpacer();
 
         return (
-            <div ref={elementRef} className={className} tabIndex={0} style={props.style} onScroll={onScroll}>
+            <div ref={elementRef} className={className} tabIndex={0} style={props.style} {...otherProps} onScroll={onScroll}>
                 {content}
                 {spacer}
                 {loader}