diff --git a/src/components/holdItem/HoldItem.tsx b/src/components/holdItem/HoldItem.tsx
index fc7dab45..991a35af 100644
--- a/src/components/holdItem/HoldItem.tsx
+++ b/src/components/holdItem/HoldItem.tsx
@@ -329,12 +329,10 @@ const HoldItemComponent = ({
       disableMove
         ? 0
         : isActive.value
-        ? withSpring(tY, SPRING_CONFIGURATION)
-        : withTiming(-0.1, { duration: HOLD_ITEM_TRANSFORM_DURATION });
+          ? withSpring(tY, SPRING_CONFIGURATION)
+          : withTiming(-0.1, { duration: HOLD_ITEM_TRANSFORM_DURATION });
 
     return {
-      zIndex: 10,
-      position: 'absolute',
       top: itemRectY.value,
       left: itemRectX.value,
       width: itemRectWidth.value,
@@ -352,6 +350,7 @@ const HoldItemComponent = ({
       ],
     };
   });
+
   const portalContainerStyle = useMemo(
     () => [styles.holdItem, animatedPortalStyle],
     [animatedPortalStyle]
diff --git a/src/components/holdItem/styles.ts b/src/components/holdItem/styles.ts
index e822b78f..a9a8a984 100644
--- a/src/components/holdItem/styles.ts
+++ b/src/components/holdItem/styles.ts
@@ -1,7 +1,10 @@
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
-  holdItem: { zIndex: 10, position: 'absolute' },
+  holdItem: {
+    zIndex: 10,
+    position: 'absolute',
+  },
   portalOverlay: {
     ...StyleSheet.absoluteFillObject,
     zIndex: 15,
diff --git a/src/components/menu/MenuList.tsx b/src/components/menu/MenuList.tsx
index 875d6b51..341e3b7e 100644
--- a/src/components/menu/MenuList.tsx
+++ b/src/components/menu/MenuList.tsx
@@ -39,6 +39,7 @@ const MenuListComponent = () => {
   const { state, theme, menuProps } = useInternal();
 
   const [itemList, setItemList] = React.useState<MenuItemProps[]>([]);
+  const [isVisible, setIsVisible] = React.useState<boolean>(state.value === CONTEXT_MENU_STATE.ACTIVE);
 
   const menuHeight = useDerivedValue(() => {
     const itemsWithSeparator = menuProps.value.items.filter(
@@ -64,16 +65,20 @@ const MenuListComponent = () => {
     );
 
     const _leftPosition = leftOrRight(menuProps);
+    const isMenuActive = state.value === CONTEXT_MENU_STATE.ACTIVE
 
     const menuScaleAnimation = () =>
-      state.value === CONTEXT_MENU_STATE.ACTIVE
+      isMenuActive
         ? withSpring(1, SPRING_CONFIGURATION_MENU)
         : withTiming(0, {
-            duration: HOLD_ITEM_TRANSFORM_DURATION,
-          });
+          duration: HOLD_ITEM_TRANSFORM_DURATION,
+        }, finished => {
+          if (finished && !isMenuActive)
+            runOnJS(setIsVisible)(false)
+        });
 
     const opacityAnimation = () =>
-      withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {
+      withTiming(isMenuActive ? 1 : 0, {
         duration: HOLD_ITEM_TRANSFORM_DURATION,
       });
 
@@ -101,8 +106,8 @@ const MenuListComponent = () => {
             ? 'rgba(255, 255, 255, .75)'
             : 'rgba(255, 255, 255, .95)'
           : IS_IOS
-          ? 'rgba(0,0,0,0.5)'
-          : 'rgba(39, 39, 39, .8)',
+            ? 'rgba(0,0,0,0.5)'
+            : 'rgba(39, 39, 39, .8)',
     };
   }, [theme]);
 
@@ -115,6 +120,15 @@ const MenuListComponent = () => {
     prevList.value = items;
   };
 
+  useAnimatedReaction(
+    () => state.value === CONTEXT_MENU_STATE.ACTIVE,
+    isMenuActive => {
+      if (isMenuActive)
+        runOnJS(setIsVisible)(true)
+    },
+    [state]
+  )
+
   useAnimatedReaction(
     () => menuProps.value.items,
     _items => {
@@ -125,22 +139,27 @@ const MenuListComponent = () => {
     [menuProps]
   );
 
+  if (!isVisible)
+    return null
+
   return (
-    <AnimatedView
-      intensity={100}
-      animatedProps={animatedProps}
-      style={[styles.menuContainer, messageStyles]}
-    >
-      <Animated.View
-        style={[
-          StyleSheet.absoluteFillObject,
-          styles.menuInnerContainer,
-          animatedInnerContainerStyle,
-        ]}
+    <Animated.View style={[styles.menuContainer, messageStyles]}>
+      <AnimatedView
+        intensity={100}
+        animatedProps={animatedProps}
+        style={StyleSheet.absoluteFillObject}
       >
-        <MenuItems items={itemList} />
-      </Animated.View>
-    </AnimatedView>
+        <Animated.View
+          style={[
+            StyleSheet.absoluteFillObject,
+            styles.menuInnerContainer,
+            animatedInnerContainerStyle,
+          ]}
+        >
+          <MenuItems items={itemList} />
+        </Animated.View>
+      </AnimatedView>
+    </Animated.View>
   );
 };
 
diff --git a/src/components/menu/styles.ts b/src/components/menu/styles.ts
index 529fcc57..9e2248ca 100644
--- a/src/components/menu/styles.ts
+++ b/src/components/menu/styles.ts
@@ -18,7 +18,6 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
     overflow: 'hidden',
-    zIndex: 15,
   },
   menuInnerContainer: {
     display: 'flex',