diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
index 725401a06..a08a596df 100644
--- a/src/components/ContextMenuItem.js
+++ b/src/components/ContextMenuItem.js
@@ -7,7 +7,6 @@ import Icon from './Icon';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
 import getButtonState from '../libs/getButtonState';
-import withDelayToggleButtonState, {withDelayToggleButtonStatePropTypes} from './withDelayToggleButtonState';
 
 const propTypes = {
     /** Icon Component */
@@ -28,20 +27,14 @@ const propTypes = {
     /** Callback to fire when the item is pressed */
     onPress: PropTypes.func.isRequired,
 
-    /** Automatically reset the success status */
-    autoReset: PropTypes.bool,
-
     /** A description text to show under the title */
     description: PropTypes.string,
-
-    ...withDelayToggleButtonStatePropTypes,
 };
 
 const defaultProps = {
     isMini: false,
     successIcon: null,
     successText: '',
-    autoReset: false,
     description: '',
 };
 
@@ -50,10 +43,13 @@ class ContextMenuItem extends Component {
         super(props);
 
         this.triggerPressAndUpdateSuccess = this.triggerPressAndUpdateSuccess.bind(this);
+        this.state = {
+            isSuccess: false,
+        };
     }
 
     triggerPressAndUpdateSuccess() {
-        if (this.props.isDelayButtonStateComplete) {
+        if (this.state.isSuccess) {
             return;
         }
         this.props.onPress();
@@ -61,13 +57,15 @@ class ContextMenuItem extends Component {
         // We only set the success state when we have icon or text to represent the success state
         // We may want to replace this check by checking the Result from OnPress Callback in future.
         if (this.props.successIcon || this.props.successText) {
-            this.props.toggleDelayButtonState(this.props.autoReset);
+            this.setState({
+                isSuccess: true,
+            });
         }
     }
 
     render() {
-        const icon = this.props.isDelayButtonStateComplete ? this.props.successIcon || this.props.icon : this.props.icon;
-        const text = this.props.isDelayButtonStateComplete ? this.props.successText || this.props.text : this.props.text;
+        const icon = this.state.isSuccess ? this.props.successIcon || this.props.icon : this.props.icon;
+        const text = this.state.isSuccess ? this.props.successText || this.props.text : this.props.text;
         return (
             this.props.isMini
                 ? (
@@ -79,14 +77,14 @@ class ContextMenuItem extends Component {
                             style={
                                 ({hovered, pressed}) => [
                                     styles.reportActionContextMenuMiniButton,
-                                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, this.props.isDelayButtonStateComplete)),
+                                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, this.state.isSuccess)),
                                 ]
                             }
                         >
                             {({hovered, pressed}) => (
                                 <Icon
                                     src={icon}
-                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, this.props.isDelayButtonStateComplete))}
+                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, this.state.isSuccess))}
                                 />
                             )}
                         </Pressable>
@@ -97,7 +95,7 @@ class ContextMenuItem extends Component {
                         icon={icon}
                         onPress={this.triggerPressAndUpdateSuccess}
                         wrapperStyle={styles.pr9}
-                        success={this.props.isDelayButtonStateComplete}
+                        success={this.state.isSuccess}
                         description={this.props.description}
                     />
                 )
@@ -108,4 +106,4 @@ class ContextMenuItem extends Component {
 ContextMenuItem.propTypes = propTypes;
 ContextMenuItem.defaultProps = defaultProps;
 
-export default withDelayToggleButtonState(ContextMenuItem);
+export default ContextMenuItem;
diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js
index fbcfdee36..7a8309b4b 100755
--- a/src/components/HeaderWithCloseButton.js
+++ b/src/components/HeaderWithCloseButton.js
@@ -15,7 +15,7 @@ import ThreeDotsMenu, {ThreeDotsMenuItemPropTypes} from './ThreeDotsMenu';
 import VirtualKeyboard from '../libs/VirtualKeyboard';
 import getButtonState from '../libs/getButtonState';
 import * as StyleUtils from '../styles/StyleUtils';
-import withDelayToggleButtonState, {withDelayToggleButtonStatePropTypes} from './withDelayToggleButtonState';
+import withToggleButtonStateAfterDelay, {withToggleButtonStateAfterDelayPropTypes} from './withToggleButtonStateAfterDelay';
 import compose from '../libs/compose';
 
 const propTypes = {
@@ -80,7 +80,7 @@ const propTypes = {
 
     ...withLocalizePropTypes,
 
-    ...withDelayToggleButtonStatePropTypes,
+    ...withToggleButtonStateAfterDelayPropTypes,
 };
 
 const defaultProps = {
@@ -114,12 +114,12 @@ class HeaderWithCloseButton extends Component {
     }
 
     triggerButtonCompleteAndDownload() {
-        if (this.props.isDelayButtonStateComplete) {
+        if (this.props.isButtonStateActive) {
             return;
         }
 
         this.props.onDownloadButtonPress();
-        this.props.toggleDelayButtonState();
+        this.props.toggleButtonStateAfterDelay();
     }
 
     render() {
@@ -164,7 +164,7 @@ class HeaderWithCloseButton extends Component {
                                 >
                                     <Icon
                                         src={Expensicons.Download}
-                                        fill={StyleUtils.getIconFillColor(getButtonState(false, false, this.props.isDelayButtonStateComplete))}
+                                        fill={StyleUtils.getIconFillColor(getButtonState(false, false, this.props.isButtonStateActive))}
                                     />
                                 </Pressable>
                             </Tooltip>
@@ -220,5 +220,5 @@ HeaderWithCloseButton.displayName = 'HeaderWithCloseButton';
 
 export default compose(
     withLocalize,
-    withDelayToggleButtonState,
+    withToggleButtonStateAfterDelay,
 )(HeaderWithCloseButton);
diff --git a/src/components/withDelayToggleButtonState.js b/src/components/withDelayToggleButtonState.js
deleted file mode 100644
index 586bc566a..000000000
--- a/src/components/withDelayToggleButtonState.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
-
-const withDelayToggleButtonStatePropTypes = {
-    /** A value whether the button state is complete */
-    isDelayButtonStateComplete: PropTypes.bool.isRequired,
-
-    /** A function to call to change the complete state */
-    toggleDelayButtonState: PropTypes.func.isRequired,
-};
-
-export default function (WrappedComponent) {
-    class WithDelayToggleButtonState extends Component {
-        constructor(props) {
-            super(props);
-
-            this.state = {
-                isDelayButtonStateComplete: false,
-            };
-            this.toggleDelayButtonState = this.toggleDelayButtonState.bind(this);
-        }
-
-        componentWillUnmount() {
-            if (!this.resetButtonStateCompleteTimer) {
-                return;
-            }
-
-            clearTimeout(this.resetButtonStateCompleteTimer);
-        }
-
-        /**
-         * @param {Boolean} [resetAfterDelay] Impose delay before toggling state
-         */
-        toggleDelayButtonState(resetAfterDelay) {
-            this.setState({
-                isDelayButtonStateComplete: true,
-            });
-
-            if (!resetAfterDelay) {
-                return;
-            }
-
-            this.resetButtonStateCompleteTimer = setTimeout(() => {
-                this.setState({
-                    isDelayButtonStateComplete: false,
-                });
-            }, 1800);
-        }
-
-        render() {
-            return (
-                <WrappedComponent
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...this.props}
-                    isDelayButtonStateComplete={this.state.isDelayButtonStateComplete}
-                    toggleDelayButtonState={this.toggleDelayButtonState}
-                />
-            );
-        }
-    }
-
-    WithDelayToggleButtonState.displayName = `WithDelayToggleButtonState(${getComponentDisplayName(WrappedComponent)})`;
-    WithDelayToggleButtonState.propTypes = {
-        forwardedRef: PropTypes.oneOfType([
-            PropTypes.func,
-            PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),
-        ]),
-    };
-    WithDelayToggleButtonState.defaultProps = {
-        forwardedRef: undefined,
-    };
-
-    return React.forwardRef((props, ref) => (
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        <WithDelayToggleButtonState {...props} forwardedRef={ref} />
-    ));
-}
-
-export {
-    withDelayToggleButtonStatePropTypes,
-};