diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js
index 85bf9e2b2e..438041b5b6 100644
--- a/components/lib/accordion/Accordion.js
+++ b/components/lib/accordion/Accordion.js
@@ -330,12 +330,12 @@ export const Accordion = React.forwardRef((inProps, ref) => {
 
     const tabs = createTabs();
     const rootProps = mergeProps(
+        ptm('root'),
         {
             className: classNames(props.className, cx('root')),
             style: props.style
         },
-        AccordionBase.getOtherProps(props),
-        ptm('root')
+        AccordionBase.getOtherProps(props)
     );
 
     return (
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
index c8f441173b..9ff1fe3608 100644
--- a/components/lib/autocomplete/AutoComplete.js
+++ b/components/lib/autocomplete/AutoComplete.js
@@ -773,14 +773,14 @@ export const AutoComplete = React.memo(
         const input = createInput();
         const dropdown = createDropdown();
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: idState,
                 ref: elementRef,
                 style: props.style,
                 className: classNames(props.className, cx('root', { focusedState }))
             },
-            otherProps,
-            ptm('root')
+            otherProps
         );
 
         return (
diff --git a/components/lib/avatar/Avatar.js b/components/lib/avatar/Avatar.js
index c9ebe378a5..5f8b0bb291 100644
--- a/components/lib/avatar/Avatar.js
+++ b/components/lib/avatar/Avatar.js
@@ -85,13 +85,13 @@ export const Avatar = React.forwardRef((inProps, ref) => {
     }));
 
     const rootProps = mergeProps(
+        ptm('root'),
         {
             ref: elementRef,
             style: props.style,
             className: classNames(props.className, cx('root', { imageFailed }))
         },
-        AvatarBase.getOtherProps(props),
-        ptm('root')
+        AvatarBase.getOtherProps(props)
     );
 
     const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
diff --git a/components/lib/avatargroup/AvatarGroup.js b/components/lib/avatargroup/AvatarGroup.js
index 995b30072e..06f001bd7e 100644
--- a/components/lib/avatargroup/AvatarGroup.js
+++ b/components/lib/avatargroup/AvatarGroup.js
@@ -24,13 +24,13 @@ export const AvatarGroup = React.forwardRef((inProps, ref) => {
     }));
 
     const rootProps = mergeProps(
+        ptm('root'),
         {
             ref: elementRef,
             style: props.style,
             className: classNames(props.className, cx('root'))
         },
-        AvatarGroupBase.getOtherProps(props),
-        ptm('root')
+        AvatarGroupBase.getOtherProps(props)
     );
 
     return <div {...rootProps}>{props.children}</div>;
diff --git a/components/lib/badge/Badge.js b/components/lib/badge/Badge.js
index 736a91f7bd..06384e53d8 100644
--- a/components/lib/badge/Badge.js
+++ b/components/lib/badge/Badge.js
@@ -26,13 +26,13 @@ export const Badge = React.memo(
         }));
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 style: props.style,
                 className: classNames(props.className, cx('root'))
             },
-            BadgeBase.getOtherProps(props),
-            ptm('root')
+            BadgeBase.getOtherProps(props)
         );
 
         return <span {...rootProps}>{props.value}</span>;
diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js
index 777d1b489a..b1afe65cc6 100644
--- a/components/lib/blockui/BlockUI.js
+++ b/components/lib/blockui/BlockUI.js
@@ -120,6 +120,7 @@ export const BlockUI = React.forwardRef((inProps, ref) => {
     const mask = createMask();
 
     const rootProps = mergeProps(
+        ptm('root'),
         {
             id: props.id,
             ref: elementRef,
@@ -127,8 +128,7 @@ export const BlockUI = React.forwardRef((inProps, ref) => {
             className: classNames(props.containerClassName, cx('root')),
             'aria-busy': props.blocked
         },
-        BlockUIBase.getOtherProps(props),
-        ptm('root')
+        BlockUIBase.getOtherProps(props)
     );
 
     return (
diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js
index 92aa0afdd8..36fa47f510 100644
--- a/components/lib/breadcrumb/BreadCrumb.js
+++ b/components/lib/breadcrumb/BreadCrumb.js
@@ -250,14 +250,14 @@ export const BreadCrumb = React.memo(
             ptm('menu')
         );
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 ref: elementRef,
                 className: classNames(props.className, cx('root')),
                 style: props.style
             },
-            BreadCrumbBase.getOtherProps(props),
-            ptm('root')
+            BreadCrumbBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
index 01aeae0e08..eae356633b 100644
--- a/components/lib/button/Button.js
+++ b/components/lib/button/Button.js
@@ -113,6 +113,7 @@ export const Button = React.memo(
         const defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label'];
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 'aria-label': defaultAriaLabel,
@@ -120,8 +121,7 @@ export const Button = React.memo(
                 className: classNames(props.className, cx('root', { size, disabled })),
                 disabled: disabled
             },
-            ButtonBase.getOtherProps(props),
-            ptm('root')
+            ButtonBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/buttongroup/ButtonGroup.js b/components/lib/buttongroup/ButtonGroup.js
index 87dd8da49e..4d774a30de 100644
--- a/components/lib/buttongroup/ButtonGroup.js
+++ b/components/lib/buttongroup/ButtonGroup.js
@@ -24,13 +24,13 @@ export const ButtonGroup = React.memo(
         const isSingleButton = React.Children.count(props.children) === 1;
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 className: classNames(cx('root'), { 'p-button-group-single': isSingleButton }),
                 role: 'group'
             },
-            ButtonGroupBase.getOtherProps(props),
-            ptm('root')
+            ButtonGroupBase.getOtherProps(props)
         );
 
         return <span {...rootProps}>{props.children}</span>;
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 564073bf32..5c8362e03c 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -4439,13 +4439,13 @@ export const Calendar = React.memo(
         const yearPicker = createYearPicker();
         const isFilled = DomHandler.hasClass(inputRef.current, 'p-filled') && inputRef.current.value !== '';
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 className: classNames(props.className, cx('root', { focusedState, isFilled, panelVisible: visible })),
                 style: props.style
             },
-            CalendarBase.getOtherProps(props),
-            ptm('root')
+            CalendarBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/card/Card.js b/components/lib/card/Card.js
index a12ec9c1ac..94cef3ba7b 100644
--- a/components/lib/card/Card.js
+++ b/components/lib/card/Card.js
@@ -92,14 +92,14 @@ export const Card = React.forwardRef((inProps, ref) => {
     }, [elementRef, ref]);
 
     const rootProps = mergeProps(
+        ptm('root'),
         {
             id: props.id,
             ref: elementRef,
             style: props.style,
             className: classNames(props.className, cx('root'))
         },
-        CardBase.getOtherProps(props),
-        ptm('root')
+        CardBase.getOtherProps(props)
     );
 
     const header = createHeader();
diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
index 3dc9845ffb..d6ab3db923 100644
--- a/components/lib/carousel/Carousel.js
+++ b/components/lib/carousel/Carousel.js
@@ -805,6 +805,7 @@ export const Carousel = React.memo(
         const header = createHeader();
         const footer = createFooter();
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 ref: elementRef,
@@ -812,8 +813,7 @@ export const Carousel = React.memo(
                 style: props.style,
                 role: 'region'
             },
-            CarouselBase.getOtherProps(props),
-            ptm('root')
+            CarouselBase.getOtherProps(props)
         );
 
         const contentProps = mergeProps(
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
index 8e95614200..6d3535845d 100644
--- a/components/lib/cascadeselect/CascadeSelect.js
+++ b/components/lib/cascadeselect/CascadeSelect.js
@@ -528,6 +528,7 @@ export const CascadeSelect = React.memo(
             const dropdownIcon = props.loading ? createLoadingIcon() : createDropdownIcon();
             const overlay = createOverlay();
             const rootProps = mergeProps(
+                ptm('root'),
                 {
                     id: props.id,
                     ref: elementRef,
@@ -535,8 +536,7 @@ export const CascadeSelect = React.memo(
                     style: props.style,
                     onClick: (e) => onClick(e)
                 },
-                otherProps,
-                ptm('root')
+                otherProps
             );
 
             return (
diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js
index 94984315ff..de6cefdf83 100644
--- a/components/lib/chart/Chart.js
+++ b/components/lib/chart/Chart.js
@@ -93,14 +93,14 @@ const PrimeReactChart = React.memo(
         const title = props.options && props.options.plugins && props.options.plugins.title && props.options.plugins.title.text;
         const ariaLabel = props.ariaLabel || title;
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 ref: elementRef,
                 style: sx('root'),
                 className: classNames(props.className, cx('root'))
             },
-            ChartBase.getOtherProps(props),
-            ptm('root')
+            ChartBase.getOtherProps(props)
         );
         const canvasProps = mergeProps(
             {
diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
index fd8b6a143a..d63db7177d 100644
--- a/components/lib/checkbox/Checkbox.js
+++ b/components/lib/checkbox/Checkbox.js
@@ -106,6 +106,7 @@ export const Checkbox = React.memo(
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const otherProps = CheckboxBase.getOtherProps(props);
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 className: classNames(props.className, cx('root', { checked, context })),
@@ -115,8 +116,7 @@ export const Checkbox = React.memo(
                 onContextMenu: props.onContextMenu,
                 onMouseDown: props.onMouseDown
             },
-            otherProps,
-            ptm('root')
+            otherProps
         );
 
         const createInputElement = () => {
diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
index 79fbb9d8f8..43d7ab4cc7 100644
--- a/components/lib/chip/Chip.js
+++ b/components/lib/chip/Chip.js
@@ -105,14 +105,14 @@ export const Chip = React.memo(
             const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
 
             const rootProps = mergeProps(
+                ptm('root'),
                 {
                     ref: elementRef,
                     style: props.style,
                     className: classNames(props.className, cx('root')),
                     'aria-label': props.label
                 },
-                ChipBase.getOtherProps(props),
-                ptm('root')
+                ChipBase.getOtherProps(props)
             );
 
             return (
diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
index 97167e816d..8f7f502e39 100644
--- a/components/lib/chips/Chips.js
+++ b/components/lib/chips/Chips.js
@@ -449,13 +449,13 @@ export const Chips = React.memo(
         const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const list = createList();
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 ref: elementRef,
                 className: classNames(props.className, cx('root', { isFilled, focusedState, disabled: props.disabled, invalid: props.invalid })),
                 style: props.style
-            },
-            ptm('root')
+            }
         );
 
         return (
diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js
index 1c91366503..d63b059caa 100644
--- a/components/lib/colorpicker/ColorPicker.js
+++ b/components/lib/colorpicker/ColorPicker.js
@@ -641,14 +641,14 @@ export const ColorPicker = React.memo(
         const content = createContent();
         const input = createInput();
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 ref: elementRef,
                 style: props.style,
                 className: classNames(props.className, cx('root'))
             },
-            ColorPickerBase.getOtherProps(props),
-            ptm('root')
+            ColorPickerBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js
index 24736df714..ba69f7a053 100644
--- a/components/lib/confirmpopup/ConfirmPopup.js
+++ b/components/lib/confirmpopup/ConfirmPopup.js
@@ -358,6 +358,7 @@ export const ConfirmPopup = React.memo(
         };
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: overlayRef,
                 id: getPropValue('id'),
@@ -365,8 +366,7 @@ export const ConfirmPopup = React.memo(
                 style: getPropValue('style'),
                 onClick: onPanelClick
             },
-            ConfirmPopupBase.getOtherProps(props),
-            ptm('root')
+            ConfirmPopupBase.getOtherProps(props)
         );
 
         const transitionProps = mergeProps(
diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js
index c89eea6349..91fd4b5c59 100644
--- a/components/lib/contextmenu/ContextMenu.js
+++ b/components/lib/contextmenu/ContextMenu.js
@@ -686,6 +686,7 @@ export const ContextMenu = React.memo(
 
         const createContextMenu = () => {
             const rootProps = mergeProps(
+                ptm('root'),
                 {
                     id: props.id,
                     className: classNames(props.className, cx('root', { context })),
@@ -694,7 +695,6 @@ export const ContextMenu = React.memo(
                     onMouseEnter: (e) => onMenuMouseEnter(e)
                 },
                 ContextMenuBase.getOtherProps(props),
-                ptm('root')
             );
 
             const transitionProps = mergeProps(
diff --git a/components/lib/datascroller/DataScroller.js b/components/lib/datascroller/DataScroller.js
index 5462d4621b..956e91d5ea 100644
--- a/components/lib/datascroller/DataScroller.js
+++ b/components/lib/datascroller/DataScroller.js
@@ -239,13 +239,13 @@ export const DataScroller = React.memo(
         const content = createContent();
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 ref: elementRef,
                 className: classNames(props.className, cx('root'))
             },
-            DataScrollerBase.getOtherProps(props),
-            ptm('root')
+            DataScrollerBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
index af063ba5ed..113498e22b 100644
--- a/components/lib/datatable/DataTable.js
+++ b/components/lib/datatable/DataTable.js
@@ -2087,6 +2087,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     const resizeHelper = createResizeHelper();
     const reorderIndicators = createReorderIndicators();
     const rootProps = mergeProps(
+        ptCallbacks.ptm('root'),
         {
             id: props.id,
             className: classNames(props.className, ptCallbacks.cx('root', { selectable })),
@@ -2094,8 +2095,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
             'data-scrollselectors': '.p-datatable-wrapper',
             'data-showgridlines': props.showGridlines
         },
-        DataTableBase.getOtherProps(props),
-        ptCallbacks.ptm('root')
+        DataTableBase.getOtherProps(props)
     );
 
     return (
diff --git a/components/lib/dataview/DataView.js b/components/lib/dataview/DataView.js
index 6ff493a60a..a5e25991c1 100644
--- a/components/lib/dataview/DataView.js
+++ b/components/lib/dataview/DataView.js
@@ -31,13 +31,13 @@ export const DataViewLayoutOptions = React.memo((inProps) => {
     const listIcon = IconUtils.getJSXIcon(props.listIcon || <BarsIcon {...listIconProps} />, { ...listIconProps }, { props });
     const gridIcon = IconUtils.getJSXIcon(props.gridIcon || <ThLargeIcon {...gridIconProps} />, { ...gridIconProps }, { props });
     const rootProps = mergeProps(
+        ptm('root'),
         {
             id: props.id,
             style: props.style,
             className: classNames(props.className, cx('root'))
         },
-        DataViewLayoutOptionsBase.getOtherProps(props),
-        ptm('root')
+        DataViewLayoutOptionsBase.getOtherProps(props)
     );
 
     const listButtonProps = mergeProps(
@@ -329,14 +329,14 @@ export const DataView = React.memo(
         const footer = createFooter();
         const content = createContent(data);
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 ref: elementRef,
                 style: props.style,
                 className: classNames(props.className, cx('root'))
             },
-            DataViewBase.getOtherProps(props),
-            ptm('root')
+            DataViewBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/deferredcontent/DeferredContent.js b/components/lib/deferredcontent/DeferredContent.js
index c474fe6d2d..2b16c6bbf6 100644
--- a/components/lib/deferredcontent/DeferredContent.js
+++ b/components/lib/deferredcontent/DeferredContent.js
@@ -57,11 +57,11 @@ export const DeferredContent = React.forwardRef((inProps, ref) => {
     });
 
     const rootProps = mergeProps(
+        ptm('root'),
         {
             ref: elementRef
         },
-        DeferredContentBase.getOtherProps(props),
-        ptm('root')
+        DeferredContentBase.getOtherProps(props)
     );
 
     return <div {...rootProps}>{loadedState && props.children}</div>;
diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
index 03336e00ba..2b8f9a71c2 100644
--- a/components/lib/dialog/Dialog.js
+++ b/components/lib/dialog/Dialog.js
@@ -659,6 +659,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
         );
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: dialogRef,
                 id: idState,
@@ -671,8 +672,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
                 'aria-modal': props.modal,
                 onPointerDown: onDialogPointerDown
             },
-            DialogBase.getOtherProps(props),
-            ptm('root')
+            DialogBase.getOtherProps(props)
         );
 
         const transitionProps = mergeProps(
diff --git a/components/lib/divider/Divider.js b/components/lib/divider/Divider.js
index bcf5ef6049..4bbe324772 100644
--- a/components/lib/divider/Divider.js
+++ b/components/lib/divider/Divider.js
@@ -25,6 +25,7 @@ export const Divider = React.forwardRef((inProps, ref) => {
     }));
 
     const rootProps = mergeProps(
+        ptm('root'),
         {
             ref: elementRef,
             style: sx('root'),
@@ -32,8 +33,7 @@ export const Divider = React.forwardRef((inProps, ref) => {
             'aria-orientation': props.layout,
             role: 'separator'
         },
-        DividerBase.getOtherProps(props),
-        ptm('root')
+        DividerBase.getOtherProps(props)
     );
 
     const contentProps = mergeProps(
diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js
index e60c8d18d9..44408ec115 100644
--- a/components/lib/dock/Dock.js
+++ b/components/lib/dock/Dock.js
@@ -326,12 +326,12 @@ export const Dock = React.memo(
         const list = createList();
         const footer = createFooter();
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 className: classNames(props.className, cx('root')),
                 style: props.style
             },
-            DockBase.getOtherProps(props),
-            ptm('root')
+            DockBase.getOtherProps(props)
         );
 
         const containerProps = mergeProps(
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index 5b1fef7edc..3c707ffc22 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -1198,6 +1198,7 @@ export const Dropdown = React.memo(
         const dropdownIcon = props.loading ? createLoadingIcon() : createDropdownIcon();
         const clearIcon = createClearIcon();
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 ref: elementRef,
@@ -1211,8 +1212,7 @@ export const Dropdown = React.memo(
                 'data-p-focus': focusedState,
                 'aria-activedescendant': focusedState ? `dropdownItem_${focusedOptionIndex}` : undefined
             },
-            otherProps,
-            ptm('root')
+            otherProps
         );
 
         const firstHiddenFocusableElementProps = mergeProps(
diff --git a/components/lib/editor/Editor.js b/components/lib/editor/Editor.js
index 01bf6d9740..8bbd3b7384 100644
--- a/components/lib/editor/Editor.js
+++ b/components/lib/editor/Editor.js
@@ -257,11 +257,11 @@ export const Editor = React.memo(
         );
         const content = <div {...contentProps} />;
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 className: classNames(props.className, cx('root'))
             },
-            EditorBase.getOtherProps(props),
-            ptm('root')
+            EditorBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/fieldset/Fieldset.js b/components/lib/fieldset/Fieldset.js
index e0a1ba0524..5c14de223b 100644
--- a/components/lib/fieldset/Fieldset.js
+++ b/components/lib/fieldset/Fieldset.js
@@ -195,6 +195,7 @@ export const Fieldset = React.forwardRef((inProps, ref) => {
     }));
 
     const rootProps = mergeProps(
+        ptm('root'),
         {
             id: idState,
             ref: elementRef,
@@ -202,8 +203,7 @@ export const Fieldset = React.forwardRef((inProps, ref) => {
             className: classNames(props.className, cx('root')),
             onClick: props.onClick
         },
-        FieldsetBase.getOtherProps(props),
-        ptm('root')
+        FieldsetBase.getOtherProps(props)
     );
 
     const legend = createLegend();
diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
index 1eb97977af..f3327b4a7b 100644
--- a/components/lib/fileupload/FileUpload.js
+++ b/components/lib/fileupload/FileUpload.js
@@ -647,13 +647,13 @@ export const FileUpload = React.memo(
             }
 
             const rootProps = mergeProps(
+                ptm('root'),
                 {
                     id: props.id,
                     className: classNames(props.className, cx('root')),
                     style: props.style
                 },
-                FileUploadBase.getOtherProps(props),
-                ptm('root')
+                FileUploadBase.getOtherProps(props)
             );
 
             const contentProps = mergeProps(
@@ -715,12 +715,12 @@ export const FileUpload = React.memo(
             );
             const input = !hasFiles && <input {...inputProps} />;
             const rootProps = mergeProps(
+                ptm('root'),
                 {
                     className: classNames(props.className, cx('root')),
                     style: props.style
                 },
-                FileUploadBase.getOtherProps(props),
-                ptm('root')
+                FileUploadBase.getOtherProps(props)
             );
 
             const basicButtonProps = mergeProps(
diff --git a/components/lib/floatlabel/FloatLabel.js b/components/lib/floatlabel/FloatLabel.js
index 4263c11725..f79d062dc8 100644
--- a/components/lib/floatlabel/FloatLabel.js
+++ b/components/lib/floatlabel/FloatLabel.js
@@ -22,12 +22,12 @@ export const FloatLabel = React.memo(
         }, [elementRef, ref]);
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 className: classNames(cx('root'))
             },
-            FloatLabelBase.getOtherProps(props),
-            ptm('root')
+            FloatLabelBase.getOtherProps(props)
         );
 
         return <span {...rootProps}>{props.children}</span>;
diff --git a/components/lib/galleria/Galleria.js b/components/lib/galleria/Galleria.js
index 086cddc9c1..41ce1f6308 100644
--- a/components/lib/galleria/Galleria.js
+++ b/components/lib/galleria/Galleria.js
@@ -216,6 +216,7 @@ export const Galleria = React.memo(
             const footer = createFooter();
 
             const rootProps = mergeProps(
+                ptm('root'),
                 {
                     ref: elementRef,
                     id: id,
@@ -223,8 +224,7 @@ export const Galleria = React.memo(
                     style: props.style,
                     role: 'region'
                 },
-                GalleriaBase.getOtherProps(props),
-                ptm('root')
+                GalleriaBase.getOtherProps(props)
             );
 
             const contentProps = mergeProps(
diff --git a/components/lib/iconfield/IconField.js b/components/lib/iconfield/IconField.js
index b8c8167236..d8df89f8b5 100644
--- a/components/lib/iconfield/IconField.js
+++ b/components/lib/iconfield/IconField.js
@@ -20,11 +20,11 @@ export const IconField = React.memo(
         });
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 className: classNames(props.className, cx('root', { iconPosition: props.iconPosition }))
             },
-            IconFieldBase.getOtherProps(props),
-            ptm('root')
+            IconFieldBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js
index 58fcc1e379..39e5458e95 100644
--- a/components/lib/image/Image.js
+++ b/components/lib/image/Image.js
@@ -382,12 +382,12 @@ export const Image = React.memo(
         const image = props.src && <img {...imageProp} alt={alt} />;
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 className: classNames(props.className, cx('root'))
             },
-            ImageBase.getOtherProps(props),
-            ptm('root')
+            ImageBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js
index 1088f33cf9..f7607e248e 100644
--- a/components/lib/inplace/Inplace.js
+++ b/components/lib/inplace/Inplace.js
@@ -151,13 +151,13 @@ export const Inplace = React.forwardRef((inProps, ref) => {
     const children = createChildren();
 
     const rootProps = mergeProps(
+        ptm('root'),
         {
             ref: elementRef,
             className: classNames(props.className, cx('root')),
             'aria-live': 'polite'
         },
-        InplaceBase.getOtherProps(props),
-        ptm('root')
+        InplaceBase.getOtherProps(props)
     );
 
     return <div {...rootProps}>{children}</div>;
diff --git a/components/lib/inputicon/InputIcon.js b/components/lib/inputicon/InputIcon.js
index 105e542a51..00daeee6ed 100644
--- a/components/lib/inputicon/InputIcon.js
+++ b/components/lib/inputicon/InputIcon.js
@@ -20,11 +20,11 @@ export const InputIcon = React.memo(
         });
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 className: classNames(props.className, cx('root'))
             },
-            InputIconBase.getOtherProps(props),
-            ptm('root')
+            InputIconBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index fadfab00b6..10ff1cb14f 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -1332,13 +1332,13 @@ export const InputNumber = React.memo(
         const inputElement = createInputElement();
         const buttonGroup = createButtonGroup();
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 className: classNames(props.className, cx('root', { focusedState, stacked, horizontal, vertical })),
                 style: props.style
             },
-            otherProps,
-            ptm('root')
+            otherProps
         );
 
         return (
diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js
index 05f8e4d39d..d19e1119fe 100644
--- a/components/lib/inputswitch/InputSwitch.js
+++ b/components/lib/inputswitch/InputSwitch.js
@@ -72,6 +72,7 @@ export const InputSwitch = React.memo(
         const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 className: classNames(props.className, cx('root', { checked })),
                 style: props.style,
@@ -80,8 +81,7 @@ export const InputSwitch = React.memo(
                 'data-p-highlight': checked,
                 'data-p-disabled': props.disabled
             },
-            otherProps,
-            ptm('root')
+            otherProps
         );
 
         const inputProps = mergeProps(
diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
index 889c13019e..31d191d55e 100644
--- a/components/lib/inputtext/InputText.js
+++ b/components/lib/inputtext/InputText.js
@@ -79,6 +79,7 @@ export const InputText = React.memo(
         }, [props.disabled, isFilled]);
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 className: classNames(props.className, cx('root', { context, isFilled })),
                 onBeforeInput: onBeforeInput,
@@ -86,8 +87,7 @@ export const InputText = React.memo(
                 onKeyDown: onKeyDown,
                 onPaste: onPaste
             },
-            InputTextBase.getOtherProps(props),
-            ptm('root')
+            InputTextBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js
index bc3225df25..7c05a9492e 100644
--- a/components/lib/inputtextarea/InputTextarea.js
+++ b/components/lib/inputtextarea/InputTextarea.js
@@ -136,6 +136,7 @@ export const InputTextarea = React.memo(
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 className: classNames(props.className, cx('root', { context, isFilled })),
@@ -147,8 +148,7 @@ export const InputTextarea = React.memo(
                 onInput: onInput,
                 onPaste: onPaste
             },
-            InputTextareaBase.getOtherProps(props),
-            ptm('root')
+            InputTextareaBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js
index 092893dee8..58c0f5e65a 100644
--- a/components/lib/knob/Knob.js
+++ b/components/lib/knob/Knob.js
@@ -241,13 +241,13 @@ export const Knob = React.memo(
         const text = props.showValue && <text {...labelProps}>{valueToDisplay()}</text>;
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 id: props.id,
                 className: classNames(props.className, cx('root')),
                 style: props.style
-            },
-            ptm('root')
+            }
         );
 
         const svgProps = mergeProps(
diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js
index fb8e2d4e41..17ca958758 100644
--- a/components/lib/listbox/ListBox.js
+++ b/components/lib/listbox/ListBox.js
@@ -876,14 +876,14 @@ export const ListBox = React.memo(
         );
 
         const rootProps = mergeProps(
+            ptCallbacks.ptm('root'),
             {
                 ref: elementRef,
                 id: props.id,
                 className: ptCallbacks.cx('root'),
                 style: props.style
             },
-            ListBoxBase.getOtherProps(props),
-            ptCallbacks.ptm('root')
+            ListBoxBase.getOtherProps(props)
         );
 
         const hiddenFirstElement = mergeProps(
diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js
index c49186a57f..a1bb48c0c4 100644
--- a/components/lib/megamenu/MegaMenu.js
+++ b/components/lib/megamenu/MegaMenu.js
@@ -1282,13 +1282,13 @@ export const MegaMenu = React.memo(
         };
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 className: classNames(props.className, cx('root', { mobileActiveState })),
                 id: idState,
                 style: props.style
             },
-            MegaMenuBase.getOtherProps(props),
-            ptm('root')
+            MegaMenuBase.getOtherProps(props)
         );
 
         const menu = createMenu();
diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js
index 2b1a38b9c6..f74c794961 100644
--- a/components/lib/mention/Mention.js
+++ b/components/lib/mention/Mention.js
@@ -559,14 +559,14 @@ export const Mention = React.memo(
         );
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 id: props.id,
                 className: classNames(props.className, cx('root', { focusedState, isFilled })),
                 style: props.style
             },
-            MentionBase.getOtherProps(props),
-            ptm('root')
+            MentionBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js
index 85d5a13bfb..f37cb80628 100644
--- a/components/lib/menu/Menu.js
+++ b/components/lib/menu/Menu.js
@@ -455,13 +455,13 @@ export const Menu = React.memo(
             if (props.model) {
                 const menuitems = createMenu();
                 const rootProps = mergeProps(
+                    ptm('root'),
                     {
                         className: classNames(props.className, cx('root', { context })),
                         style: props.style,
                         onClick: (e) => onPanelClick(e)
                     },
-                    MenuBase.getOtherProps(props),
-                    ptm('root')
+                    MenuBase.getOtherProps(props)
                 );
 
                 const menuProps = mergeProps(
diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js
index 060cd666f9..66045b3005 100644
--- a/components/lib/menubar/Menubar.js
+++ b/components/lib/menubar/Menubar.js
@@ -669,14 +669,14 @@ export const Menubar = React.memo(
             />
         );
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 ref: elementRef,
                 className: classNames(props.className, cx('root', { mobileActiveState })),
                 style: props.style
             },
-            MenubarBase.getOtherProps(props),
-            ptm('root')
+            MenubarBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js
index 4eb220bef1..a1772f78fe 100644
--- a/components/lib/message/Message.js
+++ b/components/lib/message/Message.js
@@ -83,6 +83,7 @@ export const Message = React.memo(
         const content = createContent();
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 className: classNames(props.className, cx('root')),
                 style: props.style,
@@ -90,8 +91,7 @@ export const Message = React.memo(
                 'aria-live': 'polite',
                 'aria-atomic': 'true'
             },
-            MessageBase.getOtherProps(props),
-            ptm('root')
+            MessageBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js
index eda5bccabb..432b3c5768 100644
--- a/components/lib/messages/Messages.js
+++ b/components/lib/messages/Messages.js
@@ -94,13 +94,13 @@ export const Messages = React.memo(
         }));
 
         const rootProps = mergeProps(
+            ptCallbacks.ptm('root'),
             {
                 id: props.id,
                 className: props.className,
                 style: props.style
             },
-            MessagesBase.getOtherProps(props),
-            ptCallbacks.ptm('root')
+            MessagesBase.getOtherProps(props)
         );
 
         const transitionProps = mergeProps(
diff --git a/components/lib/messages/UIMessage.js b/components/lib/messages/UIMessage.js
index 6d57270453..4bff4ee2a3 100644
--- a/components/lib/messages/UIMessage.js
+++ b/components/lib/messages/UIMessage.js
@@ -162,6 +162,7 @@ export const UIMessage = React.memo(
         );
 
         const rootProps = mergeProps(
+            ptmo(pt, 'root', { ...params, hostName: props.hostName }),
             {
                 ref,
                 className: classNames(_className, cx('uimessage.root', { severity })),
@@ -171,8 +172,7 @@ export const UIMessage = React.memo(
                 'aria-atomic': 'true',
                 onClick
             },
-            getPTOptions('root', parentParams),
-            ptmo(pt, 'root', { ...params, hostName: props.hostName })
+            getPTOptions('root', parentParams)
         );
 
         return (
diff --git a/components/lib/metergroup/MeterGroup.js b/components/lib/metergroup/MeterGroup.js
index 7299766bda..5292355308 100644
--- a/components/lib/metergroup/MeterGroup.js
+++ b/components/lib/metergroup/MeterGroup.js
@@ -36,11 +36,11 @@ export const MeterGroup = (inProps) => {
     };
 
     const rootProps = mergeProps(
+        ptm('root'),
         {
             className: classNames(props.className, cx('root', { orientation }))
         },
-        MeterGroupBase.getOtherProps(props),
-        ptm('root')
+        MeterGroupBase.getOtherProps(props)
     );
 
     const createMeters = () => {
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index cd65311b3a..6b7e44d5be 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -1155,6 +1155,7 @@ export const MultiSelect = React.memo(
         const clearIcon = !props.inline && createClearIcon();
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 id: props.id,
@@ -1163,8 +1164,7 @@ export const MultiSelect = React.memo(
                 ...otherProps,
                 onClick: onClick
             },
-            MultiSelectBase.getOtherProps(props),
-            ptm('root')
+            MultiSelectBase.getOtherProps(props)
         );
 
         const hiddenInputWrapperProps = mergeProps(
diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
index 05acecd832..028f47a293 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckbox.js
+++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -156,6 +156,7 @@ export const MultiStateCheckbox = React.memo(
         const ariaValueLabel = selectedOption ? getOptionAriaLabel(selectedOption) : ariaLabel('nullLabel');
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 id: props.id,
@@ -163,8 +164,7 @@ export const MultiStateCheckbox = React.memo(
                 style: props.style,
                 onClick: onClick
             },
-            MultiStateCheckboxBase.getOtherProps(props),
-            ptm('root')
+            MultiStateCheckboxBase.getOtherProps(props)
         );
 
         const checkboxProps = mergeProps(
diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
index 9b81bb8152..683611bb5b 100644
--- a/components/lib/orderlist/OrderList.js
+++ b/components/lib/orderlist/OrderList.js
@@ -462,14 +462,14 @@ export const OrderList = React.memo(
         });
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 id: props.id,
                 className: classNames(props.className, cx('root')),
                 style: props.style
             },
-            OrderListBase.getOtherProps(props),
-            ptm('root')
+            OrderListBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/organizationchart/OrganizationChart.js b/components/lib/organizationchart/OrganizationChart.js
index e9bc7d1762..af3d6d0d1d 100644
--- a/components/lib/organizationchart/OrganizationChart.js
+++ b/components/lib/organizationchart/OrganizationChart.js
@@ -80,14 +80,14 @@ export const OrganizationChart = React.memo(
         }));
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 ref: elementRef,
                 style: props.style,
                 className: classNames(props.className, cx('root'))
             },
-            OrganizationChartBase.getOtherProps(props),
-            ptm('root')
+            OrganizationChartBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js
index b8d4a5b9ac..7fbaf0bd73 100644
--- a/components/lib/overlaypanel/OverlayPanel.js
+++ b/components/lib/overlaypanel/OverlayPanel.js
@@ -263,14 +263,14 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
     const createElement = () => {
         const closeIcon = createCloseIcon();
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 className: classNames(props.className, cx('root', { context })),
                 style: props.style,
                 onClick: (e) => onPanelClick(e)
             },
-            OverlayPanelBase.getOtherProps(props),
-            ptm('root')
+            OverlayPanelBase.getOtherProps(props)
         );
 
         const contentProps = mergeProps(
diff --git a/components/lib/paginator/Paginator.js b/components/lib/paginator/Paginator.js
index d91b42d4b6..72336973ba 100644
--- a/components/lib/paginator/Paginator.js
+++ b/components/lib/paginator/Paginator.js
@@ -305,13 +305,13 @@ export const Paginator = React.memo(
         );
         const rightElement = rightContent && <div {...endProps}>{rightContent}</div>;
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 className: classNames(props.className, cx('root')),
                 style: props.style
             },
-            PaginatorBase.getOtherProps(props),
-            ptm('root')
+            PaginatorBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/panel/Panel.js b/components/lib/panel/Panel.js
index 3e787a35e9..97af020b59 100644
--- a/components/lib/panel/Panel.js
+++ b/components/lib/panel/Panel.js
@@ -244,14 +244,14 @@ export const Panel = React.forwardRef((inProps, ref) => {
     };
 
     const rootProps = mergeProps(
+        ptm('root'),
         {
             id: idState,
             ref: elementRef,
             style: props.style,
             className: classNames(props.className, cx('root'))
         },
-        PanelBase.getOtherProps(props),
-        ptm('root')
+        PanelBase.getOtherProps(props)
     );
     const header = createHeader();
     const content = createContent();
diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
index 0a26b933cb..1e41c407e4 100644
--- a/components/lib/panelmenu/PanelMenu.js
+++ b/components/lib/panelmenu/PanelMenu.js
@@ -431,14 +431,14 @@ export const PanelMenu = React.memo(
 
         const panels = createPanels();
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 className: classNames(props.className, cx('root')),
                 id: props.id,
                 style: props.style
             },
-            PanelMenuBase.getOtherProps(props),
-            ptm('root')
+            PanelMenuBase.getOtherProps(props)
         );
 
         return <div {...rootProps}>{panels}</div>;
diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
index b002ba1ca0..3a1f1561f3 100644
--- a/components/lib/password/Password.js
+++ b/components/lib/password/Password.js
@@ -448,13 +448,13 @@ export const Password = React.memo(
         const panel = createPanel();
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 id: props.id,
                 className: classNames(props.className, cx('root', { isFilled, focusedState })),
                 style: props.style
-            },
-            ptm('root')
+            }
         );
 
         const inputTextProps = mergeProps(
diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js
index b4a3dd01d5..1874525d80 100644
--- a/components/lib/picklist/PickList.js
+++ b/components/lib/picklist/PickList.js
@@ -612,14 +612,14 @@ export const PickList = React.memo(
         const targetItemTemplate = props.targetItemTemplate ? props.targetItemTemplate : props.itemTemplate;
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: attributeSelectorState,
                 ref: elementRef,
                 className: classNames(props.className, cx('root')),
                 style: props.style
             },
-            PickListBase.getOtherProps(props),
-            ptm('root')
+            PickListBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js
index 3087c68ddf..82c52f64d8 100644
--- a/components/lib/progressbar/ProgressBar.js
+++ b/components/lib/progressbar/ProgressBar.js
@@ -31,6 +31,7 @@ export const ProgressBar = React.memo(
         const createDeterminate = () => {
             const label = createLabel();
             const rootProps = mergeProps(
+                ptm('root'),
                 {
                     className: classNames(props.className, cx('root')),
                     style: props.style,
@@ -39,8 +40,7 @@ export const ProgressBar = React.memo(
                     'aria-valuenow': props.value,
                     'aria-valuemax': '100'
                 },
-                ProgressBarBase.getOtherProps(props),
-                ptm('root')
+                ProgressBarBase.getOtherProps(props)
             );
             const valueProps = mergeProps(
                 {
@@ -66,6 +66,7 @@ export const ProgressBar = React.memo(
 
         const createIndeterminate = () => {
             const rootProps = mergeProps(
+                ptm('root'),
                 {
                     className: classNames(props.className, cx('root')),
                     style: props.style,
@@ -74,8 +75,7 @@ export const ProgressBar = React.memo(
                     'aria-valuenow': props.value,
                     'aria-valuemax': '100'
                 },
-                ProgressBarBase.getOtherProps(props),
-                ptm('root')
+                ProgressBarBase.getOtherProps(props)
             );
 
             const containerProps = mergeProps(
diff --git a/components/lib/progressspinner/ProgressSpinner.js b/components/lib/progressspinner/ProgressSpinner.js
index b47c7b3ad3..413e15538f 100644
--- a/components/lib/progressspinner/ProgressSpinner.js
+++ b/components/lib/progressspinner/ProgressSpinner.js
@@ -25,6 +25,7 @@ export const ProgressSpinner = React.memo(
         }));
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 ref: elementRef,
@@ -33,8 +34,7 @@ export const ProgressSpinner = React.memo(
                 role: 'progressbar',
                 'aria-busy': true
             },
-            ProgressSpinnerBase.getOtherProps(props),
-            ptm('root')
+            ProgressSpinnerBase.getOtherProps(props)
         );
 
         const spinnerProps = mergeProps(
diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js
index 5f5de26d04..a4821d8db5 100644
--- a/components/lib/radiobutton/RadioButton.js
+++ b/components/lib/radiobutton/RadioButton.js
@@ -110,14 +110,14 @@ export const RadioButton = React.memo(
         const otherProps = RadioButtonBase.getOtherProps(props);
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 className: classNames(props.className, cx('root', { context })),
                 style: props.style,
                 'data-p-checked': props.checked
             },
-            otherProps,
-            ptm('root')
+            otherProps
         );
 
         delete rootProps.input;
diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js
index 7dc076be94..e8b8896916 100644
--- a/components/lib/rating/Rating.js
+++ b/components/lib/rating/Rating.js
@@ -194,14 +194,14 @@ export const Rating = React.memo(
 
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 id: props.id,
                 className: classNames(props.className, cx('root')),
                 style: props.style
             },
-            RatingBase.getOtherProps(props),
-            ptm('root')
+            RatingBase.getOtherProps(props)
         );
 
         const cancelIcon = createCancelIcon();
diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js
index 5825c1bedc..0f5836b1c2 100644
--- a/components/lib/ripple/Ripple.js
+++ b/components/lib/ripple/Ripple.js
@@ -114,12 +114,12 @@ export const Ripple = React.memo(
         }
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 'aria-hidden': true,
                 className: classNames(cx('root'))
             },
-            RippleBase.getOtherProps(props),
-            ptm('root')
+            RippleBase.getOtherProps(props)
         );
 
         return <span role="presentation" ref={inkRef} {...rootProps} onAnimationEnd={onAnimationEnd} />;
diff --git a/components/lib/row/Row.js b/components/lib/row/Row.js
index 455d7115cd..8e4547881b 100644
--- a/components/lib/row/Row.js
+++ b/components/lib/row/Row.js
@@ -13,12 +13,12 @@ export const Row = (inProps) => {
     });
 
     const rootProps = mergeProps(
+        ptm('root'),
         {
             className: props.className,
             style: props.style
         },
-        RowBase.getOtherProps(props),
-        ptm('root')
+        RowBase.getOtherProps(props)
     );
 
     return <tr {...rootProps}>{props.children}</tr>;
diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js
index 6e2f4a3ec8..e200dc5e41 100644
--- a/components/lib/scrollpanel/ScrollPanel.js
+++ b/components/lib/scrollpanel/ScrollPanel.js
@@ -292,14 +292,14 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
     }));
 
     const rootProps = mergeProps(
+        ptm('root'),
         {
             id: props.id,
             ref: containerRef,
             style: props.style,
             className: classNames(props.className, cx('root'))
         },
-        ScrollPanelBase.getOtherProps(props),
-        ptm('root')
+        ScrollPanelBase.getOtherProps(props)
     );
 
     const wrapperProps = mergeProps(
diff --git a/components/lib/scrolltop/ScrollTop.js b/components/lib/scrolltop/ScrollTop.js
index d96730814b..45a7460f84 100644
--- a/components/lib/scrolltop/ScrollTop.js
+++ b/components/lib/scrolltop/ScrollTop.js
@@ -97,6 +97,7 @@ export const ScrollTop = React.memo(
         const scrollIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
         const scrollTopAriaLabel = localeOption('aria') ? localeOption('aria').scrollTop : undefined;
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: scrollElementRef,
                 type: 'button',
@@ -105,8 +106,7 @@ export const ScrollTop = React.memo(
                 onClick,
                 'aria-label': scrollTopAriaLabel
             },
-            ScrollTopBase.getOtherProps(props),
-            ptm('root')
+            ScrollTopBase.getOtherProps(props)
         );
 
         const transitionProps = mergeProps(
diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js
index 62a154b6a4..32205e9249 100644
--- a/components/lib/selectbutton/SelectButton.js
+++ b/components/lib/selectbutton/SelectButton.js
@@ -137,6 +137,7 @@ export const SelectButton = React.memo(
         const items = createItems();
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 id: props.id,
@@ -144,8 +145,7 @@ export const SelectButton = React.memo(
                 style: props.style,
                 role: 'group'
             },
-            SelectButtonBase.getOtherProps(props),
-            ptm('root')
+            SelectButtonBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js
index 479a0cef77..e8bfc064f4 100644
--- a/components/lib/sidebar/Sidebar.js
+++ b/components/lib/sidebar/Sidebar.js
@@ -212,14 +212,14 @@ export const Sidebar = React.forwardRef((inProps, ref) => {
     );
 
     const rootProps = mergeProps(
+        ptm('root'),
         {
             id: props.id,
             className: classNames(props.className, cx('root', { context })),
             style: props.style,
             role: 'complementary'
         },
-        SidebarBase.getOtherProps(props),
-        ptm('root')
+        SidebarBase.getOtherProps(props)
     );
 
     const headerProps = mergeProps(
diff --git a/components/lib/skeleton/Skeleton.js b/components/lib/skeleton/Skeleton.js
index 77dc99917d..853f443147 100644
--- a/components/lib/skeleton/Skeleton.js
+++ b/components/lib/skeleton/Skeleton.js
@@ -26,14 +26,14 @@ export const Skeleton = React.memo(
         const style = props.size ? { width: props.size, height: props.size, borderRadius: props.borderRadius } : { width: props.width, height: props.height, borderRadius: props.borderRadius };
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 className: classNames(props.className, cx('root')),
                 style: { ...style, ...sx('root') },
                 'aria-hidden': true
             },
-            SkeletonBase.getOtherProps(props),
-            ptm('root')
+            SkeletonBase.getOtherProps(props)
         );
 
         return <div {...rootProps} />;
diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js
index b416900a01..5c3e608b88 100644
--- a/components/lib/slidemenu/SlideMenu.js
+++ b/components/lib/slidemenu/SlideMenu.js
@@ -178,6 +178,7 @@ export const SlideMenu = React.memo(
             const wrapperStyle = { height: props.viewportHeight + 'px' };
             const backward = createBackward();
             const rootProps = mergeProps(
+                ptm('root'),
                 {
                     ref: menuRef,
                     id: props.id,
@@ -185,8 +186,7 @@ export const SlideMenu = React.memo(
                     style: props.style,
                     onClick: (e) => onPanelClick(e)
                 },
-                SlideMenuBase.getOtherProps(props),
-                ptm('root')
+                SlideMenuBase.getOtherProps(props)
             );
 
             const wrapperProps = mergeProps(
diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js
index c375a4c59d..e9837a715b 100644
--- a/components/lib/slider/Slider.js
+++ b/components/lib/slider/Slider.js
@@ -356,13 +356,13 @@ export const Slider = React.memo(
 
         const content = props.range ? createRangeSlider() : createSingleSlider();
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 style: props.style,
                 className: classNames(props.className, cx('root', { vertical, horizontal })),
                 onClick: onBarClick
             },
-            SliderBase.getOtherProps(props),
-            ptm('root')
+            SliderBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js
index 14cbfc3eb2..4806297306 100644
--- a/components/lib/speeddial/SpeedDial.js
+++ b/components/lib/speeddial/SpeedDial.js
@@ -592,13 +592,13 @@ export const SpeedDial = React.memo(
         const list = createList();
         const mask = createMask();
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 className: classNames(props.className, cx('root', { visible })),
                 style: { ...props.style, ...sx('root') },
                 id: idState
             },
-            SpeedDialBase.getOtherProps(props),
-            ptm('root')
+            SpeedDialBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js
index 70f046e449..8be64efbde 100644
--- a/components/lib/splitbutton/SplitButton.js
+++ b/components/lib/splitbutton/SplitButton.js
@@ -131,14 +131,14 @@ export const SplitButton = React.memo(
         };
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 id: idState,
                 className: classNames(props.className, cx('root', { size })),
                 style: props.style
             },
-            SplitButtonBase.getOtherProps(props),
-            ptm('root')
+            SplitButtonBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js
index 139f175cf9..1c405a6a34 100644
--- a/components/lib/splitter/Splitter.js
+++ b/components/lib/splitter/Splitter.js
@@ -468,14 +468,14 @@ export const Splitter = React.memo(
         };
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 style: props.style,
                 className: classNames(props.className, cx('root')),
                 'data-p-splitter-resizing': false
             },
-            SplitterBase.getOtherProps(props),
-            ptm('root')
+            SplitterBase.getOtherProps(props)
         );
 
         const panels = createPanels();
diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js
index d88d037f1c..940fc0c081 100644
--- a/components/lib/stepper/Stepper.js
+++ b/components/lib/stepper/Stepper.js
@@ -332,12 +332,12 @@ export const Stepper = React.memo(
         };
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 className: classNames(cx('root')),
                 role: 'tablist'
             },
-            StepperBase.getOtherProps(props),
-            ptm('root')
+            StepperBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js
index 327078da56..164a19ff43 100644
--- a/components/lib/steps/Steps.js
+++ b/components/lib/steps/Steps.js
@@ -307,14 +307,14 @@ export const Steps = React.memo(
         }));
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 ref: elementRef,
                 className: classNames(props.className, cx('root')),
                 style: props.style
             },
-            StepsBase.getOtherProps(props),
-            ptm('root')
+            StepsBase.getOtherProps(props)
         );
 
         const items = createItems();
diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
index d05e5fd128..8112686bb8 100644
--- a/components/lib/tabmenu/TabMenu.js
+++ b/components/lib/tabmenu/TabMenu.js
@@ -329,14 +329,14 @@ export const TabMenu = React.memo(
             );
 
             const rootProps = mergeProps(
+                ptm('root'),
                 {
                     id: props.id,
                     ref: elementRef,
                     className: classNames(props.className, cx('root')),
                     style: props.style
                 },
-                TabMenuBase.getOtherProps(props),
-                ptm('root')
+                TabMenuBase.getOtherProps(props)
             );
 
             return (
diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js
index f281e5df7b..93492e1dbf 100644
--- a/components/lib/tabview/TabView.js
+++ b/components/lib/tabview/TabView.js
@@ -578,14 +578,14 @@ export const TabView = React.forwardRef((inProps, ref) => {
     };
 
     const rootProps = mergeProps(
+        ptm('root'),
         {
             id: idState,
             ref: elementRef,
             style: props.style,
             className: classNames(props.className, cx('root'))
         },
-        TabViewBase.getOtherProps(props),
-        ptm('root')
+        TabViewBase.getOtherProps(props)
     );
 
     const navContainerProps = mergeProps(
diff --git a/components/lib/tag/Tag.js b/components/lib/tag/Tag.js
index d24c55b0f2..6e2dfba7cd 100644
--- a/components/lib/tag/Tag.js
+++ b/components/lib/tag/Tag.js
@@ -32,13 +32,13 @@ export const Tag = React.forwardRef((inProps, ref) => {
     }));
 
     const rootProps = mergeProps(
+        ptm('root'),
         {
             ref: elementRef,
             className: classNames(props.className, cx('root')),
             style: props.style
         },
-        TagBase.getOtherProps(props),
-        ptm('root')
+        TagBase.getOtherProps(props)
     );
 
     const valueProps = mergeProps(
diff --git a/components/lib/terminal/Terminal.js b/components/lib/terminal/Terminal.js
index a1ef9dd084..5d289915d0 100644
--- a/components/lib/terminal/Terminal.js
+++ b/components/lib/terminal/Terminal.js
@@ -200,6 +200,7 @@ export const Terminal = React.memo(
         const content = createContent();
         const prompt = createPromptContainer();
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 ref: elementRef,
@@ -207,8 +208,7 @@ export const Terminal = React.memo(
                 style: props.style,
                 onClick
             },
-            TerminalBase.getOtherProps(props),
-            ptm('root')
+            TerminalBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js
index 7aaae363bb..09f865fc48 100644
--- a/components/lib/tieredmenu/TieredMenu.js
+++ b/components/lib/tieredmenu/TieredMenu.js
@@ -681,6 +681,7 @@ export const TieredMenu = React.memo(
 
         const createElement = () => {
             const rootProps = mergeProps(
+                ptm('root'),
                 {
                     ref: containerRef,
                     id: props.id,
@@ -688,8 +689,7 @@ export const TieredMenu = React.memo(
                     style: props.style,
                     onClick: onPanelClick
                 },
-                TieredMenuBase.getOtherProps(props),
-                ptm('root')
+                TieredMenuBase.getOtherProps(props)
             );
 
             const transitionProps = mergeProps(
diff --git a/components/lib/timeline/Timeline.js b/components/lib/timeline/Timeline.js
index 920f0c27e3..950e67c3cc 100644
--- a/components/lib/timeline/Timeline.js
+++ b/components/lib/timeline/Timeline.js
@@ -98,12 +98,12 @@ export const Timeline = React.memo(
         const events = createEvents();
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 className: classNames(props.className, cx('root'))
             },
-            TimelineBase.getOtherProps(props),
-            ptm('root')
+            TimelineBase.getOtherProps(props)
         );
 
         return <div {...rootProps}>{events}</div>;
diff --git a/components/lib/toast/Toast.js b/components/lib/toast/Toast.js
index ea7dbeeacf..4b4df6c1c4 100644
--- a/components/lib/toast/Toast.js
+++ b/components/lib/toast/Toast.js
@@ -116,14 +116,14 @@ export const Toast = React.memo(
 
         const createElement = () => {
             const rootProps = mergeProps(
+                ptCallbacks.ptm('root'),
                 {
                     ref: containerRef,
                     id: props.id,
                     className: ptCallbacks.cx('root', { context }),
                     style: ptCallbacks.sx('root')
                 },
-                ToastBase.getOtherProps(props),
-                ptCallbacks.ptm('root')
+                ToastBase.getOtherProps(props)
             );
 
             const transitionProps = mergeProps(
diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js
index d2d5604caf..591a6f881e 100644
--- a/components/lib/togglebutton/ToggleButton.js
+++ b/components/lib/togglebutton/ToggleButton.js
@@ -98,6 +98,7 @@ export const ToggleButton = React.memo(
         );
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 id: props.id,
@@ -105,8 +106,7 @@ export const ToggleButton = React.memo(
                 'data-p-highlight': props.checked,
                 'data-p-disabled': props.disabled
             },
-            ToggleButtonBase.getOtherProps(props),
-            ptm('root')
+            ToggleButtonBase.getOtherProps(props)
         );
 
         const inputProps = mergeProps(
diff --git a/components/lib/toolbar/Toolbar.js b/components/lib/toolbar/Toolbar.js
index f997644b19..001988e1d2 100644
--- a/components/lib/toolbar/Toolbar.js
+++ b/components/lib/toolbar/Toolbar.js
@@ -47,6 +47,7 @@ export const Toolbar = React.memo(
         );
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 id: props.id,
                 ref: elementRef,
@@ -54,8 +55,7 @@ export const Toolbar = React.memo(
                 className: classNames(props.className, cx('root')),
                 role: 'toolbar'
             },
-            ToolbarBase.getOtherProps(props),
-            ptm('root')
+            ToolbarBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index ae4d471b2e..8641524e0d 100644
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -514,6 +514,7 @@ export const Tooltip = React.memo(
         const createElement = () => {
             const empty = isTargetContentEmpty(currentTargetRef.current);
             const rootProps = mergeProps(
+                ptm('root'),
                 {
                     id: props.id,
                     className: classNames(props.className, cx('root', { positionState, classNameState })),
@@ -523,8 +524,7 @@ export const Tooltip = React.memo(
                     onMouseEnter: (e) => onMouseEnter(e),
                     onMouseLeave: (e) => onMouseLeave(e)
                 },
-                TooltipBase.getOtherProps(props),
-                ptm('root')
+                TooltipBase.getOtherProps(props)
             );
 
             const arrowProps = mergeProps(
diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js
index 03129c9c50..b3dd0f3d85 100644
--- a/components/lib/tree/Tree.js
+++ b/components/lib/tree/Tree.js
@@ -651,14 +651,14 @@ export const Tree = React.memo(
         const footer = createFooter();
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 className: classNames(props.className, cx('root')),
                 style: props.style,
                 id: props.id
             },
-            TreeBase.getOtherProps(props),
-            ptm('root')
+            TreeBase.getOtherProps(props)
         );
 
         return (
diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js
index 5a58a8f321..6b07f09ec2 100644
--- a/components/lib/treeselect/TreeSelect.js
+++ b/components/lib/treeselect/TreeSelect.js
@@ -851,6 +851,7 @@ export const TreeSelect = React.memo(
             ptm('lastHiddenFocusableElementOnOverlay')
         );
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 className: classNames(
@@ -865,8 +866,7 @@ export const TreeSelect = React.memo(
                 style: props.style,
                 onClick: onClick
             },
-            TreeSelectBase.getOtherProps(props),
-            ptm('root')
+            TreeSelectBase.getOtherProps(props)
         );
 
         const keyboardHelper = createKeyboardHelper();
diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js
index 32b1d60b76..f4ccb161f3 100644
--- a/components/lib/treetable/TreeTable.js
+++ b/components/lib/treetable/TreeTable.js
@@ -1417,6 +1417,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
     );
 
     const rootProps = mergeProps(
+        ptCallbacks.ptm('root'),
         {
             role: 'table',
             id: props.id,
@@ -1424,8 +1425,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
             style: props.style,
             'data-scrollselectors': '.p-treetable-wrapper'
         },
-        TreeTableBase.getOtherProps(props),
-        ptCallbacks.ptm('root')
+        TreeTableBase.getOtherProps(props)
     );
 
     return (
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index 1121de4188..20bd6b599e 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -146,13 +146,13 @@ export const TriStateCheckbox = React.memo(
         );
 
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 className: classNames(props.className, cx('root', { context })),
                 style: props.style,
                 'data-p-disabled': props.disabled
             },
-            TriStateCheckboxBase.getOtherProps(props),
-            ptm('root')
+            TriStateCheckboxBase.getOtherProps(props)
         );
 
         const inputProps = mergeProps(
diff --git a/components/lib/virtualscroller/VirtualScroller.js b/components/lib/virtualscroller/VirtualScroller.js
index 0aba665ea8..aa5f9412bb 100644
--- a/components/lib/virtualscroller/VirtualScroller.js
+++ b/components/lib/virtualscroller/VirtualScroller.js
@@ -781,6 +781,7 @@ export const VirtualScroller = React.memo(
         const content = createContent();
         const spacer = createSpacer();
         const rootProps = mergeProps(
+            ptm('root'),
             {
                 ref: elementRef,
                 className,
@@ -788,8 +789,7 @@ export const VirtualScroller = React.memo(
                 style: props.style,
                 onScroll: (e) => onScroll(e)
             },
-            VirtualScrollerBase.getOtherProps(props),
-            ptm('root')
+            VirtualScrollerBase.getOtherProps(props)
         );
 
         return (