diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 0d9870c1353c..eb7c318c8424 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -28,7 +28,7 @@ import * as ComposerUtils from '../../../libs/ComposerUtils';
 import * as ComposerActions from '../../../libs/actions/Composer';
 import * as User from '../../../libs/actions/User';
 import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback';
-import Hoverable from '../../../components/Hoverable';
+import getButtonState from '../../../libs/getButtonState';
 import useLocalize from '../../../hooks/useLocalize';
 import useKeyboardState from '../../../hooks/useKeyboardState';
 import useWindowDimensions from '../../../hooks/useWindowDimensions';
@@ -255,27 +255,25 @@ function ReportActionItemMessageEdit(props) {
             <View style={[styles.chatItemMessage, styles.flexRow]}>
                 <View style={[styles.justifyContentEnd]}>
                     <Tooltip text={translate('common.cancel')}>
-                        <Hoverable>
-                            {(hovered) => (
-                                <PressableWithFeedback
-                                    onPress={deleteDraft}
-                                    style={styles.chatItemSubmitButton}
-                                    nativeID={cancelButtonID}
-                                    accessibilityRole="button"
-                                    accessibilityLabel={translate('common.close')}
-                                    // disable dimming
-                                    hoverDimmingValue={1}
-                                    pressDimmingValue={1}
-                                    hoverStyle={StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.ACTIVE)}
-                                    pressStyle={StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)}
-                                >
-                                    <Icon
-                                        src={Expensicons.Close}
-                                        fill={StyleUtils.getIconFillColor(hovered ? CONST.BUTTON_STATES.ACTIVE : CONST.BUTTON_STATES.DEFAULT)}
-                                    />
-                                </PressableWithFeedback>
+                        <PressableWithFeedback
+                            onPress={deleteDraft}
+                            style={styles.chatItemSubmitButton}
+                            nativeID={cancelButtonID}
+                            accessibilityRole="button"
+                            accessibilityLabel={translate('common.close')}
+                            // disable dimming
+                            hoverDimmingValue={1}
+                            pressDimmingValue={1}
+                            hoverStyle={StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.ACTIVE)}
+                            pressStyle={StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)}
+                        >
+                            {({hovered, pressed}) => (
+                                <Icon
+                                    src={Expensicons.Close}
+                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
+                                />
                             )}
-                        </Hoverable>
+                        </PressableWithFeedback>
                     </Tooltip>
                 </View>
                 <View