diff --git a/components/doc/dropdown/templatedoc.js b/components/doc/dropdown/templatedoc.js
index 6d7ebc230a..51b5cb4c25 100644
--- a/components/doc/dropdown/templatedoc.js
+++ b/components/doc/dropdown/templatedoc.js
@@ -61,7 +61,7 @@ export function TemplateDoc(props) {
 <Dropdown value={selectedCountry} onChange={(e) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
     valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" panelFooterTemplate={panelFooterTemplate}
     dropdownIcon={(opts) => {
-        return opts.iconProps.overlayVisibleState ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
+        return opts.iconProps['data-pr-overlay-visible'] ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
     }} 
 />
         `,
@@ -127,7 +127,7 @@ export default function TemplateDemo() {
             <Dropdown value={selectedCountry} onChange={(e) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
                 valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" panelFooterTemplate={panelFooterTemplate} 
                 dropdownIcon={(opts) => {
-                    return opts.iconProps.overlayVisibleState ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
+                    return opts.iconProps['data-pr-overlay-visible'] ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
                 }}/>
         </div>    
     )
@@ -200,7 +200,7 @@ export default function TemplateDemo() {
             <Dropdown value={selectedCountry} onChange={(e: DropdownChangeEvent) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
                 valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" panelFooterTemplate={panelFooterTemplate} 
                 dropdownIcon={(opts) => {
-                    return opts.iconProps.overlayVisibleState ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
+                    return opts.iconProps['data-pr-overlay-visible'] ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
                 }}/>/>
         </div>    
     )
@@ -227,7 +227,7 @@ export default function TemplateDemo() {
                     panelFooterTemplate={panelFooterTemplate}
                     className="w-full md:w-14rem"
                     dropdownIcon={(opts) => {
-                        return opts.iconProps.overlayVisibleState ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
+                        return opts.iconProps['data-pr-overlay-visible'] ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
                     }}
                 />
             </div>
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index e8e683dfe1..145664df13 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -810,7 +810,7 @@ export const Dropdown = React.memo(
             const dropdownIconProps = mergeProps(
                 {
                     className: cx('dropdownIcon'),
-                    overlayVisibleState
+                    'data-pr-overlay-visible': overlayVisibleState
                 },
                 ptm('dropdownIcon')
             );