diff --git a/src/hooks/useAnimatedHighlightStyle/index.ts b/src/hooks/useAnimatedHighlightStyle/index.ts
index 96ecd9c9f9db..dabae528444a 100644
--- a/src/hooks/useAnimatedHighlightStyle/index.ts
+++ b/src/hooks/useAnimatedHighlightStyle/index.ts
@@ -65,12 +65,19 @@ export default function useAnimatedHighlightStyle({
     const {didScreenTransitionEnd} = useScreenWrapperTransitionStatus();
     const theme = useTheme();
 
-    const highlightBackgroundStyle = useAnimatedStyle(() => ({
-        backgroundColor: interpolateColor(repeatableProgress.get(), [0, 1], [backgroundColor ?? theme.appBG, highlightColor ?? theme.border]),
-        height: height ? interpolate(nonRepeatableProgress.get(), [0, 1], [0, height]) : 'auto',
-        opacity: interpolate(nonRepeatableProgress.get(), [0, 1], [0, 1]),
-        borderRadius,
-    }));
+    const highlightBackgroundStyle = useAnimatedStyle(() => {
+        'worklet';
+
+        const repeatableValue = repeatableProgress.get();
+        const nonRepeatableValue = nonRepeatableProgress.get();
+
+        return {
+            backgroundColor: interpolateColor(repeatableValue, [0, 1], [backgroundColor ?? theme.appBG, highlightColor ?? theme.border]),
+            height: height ? interpolate(nonRepeatableValue, [0, 1], [0, height]) : 'auto',
+            opacity: interpolate(nonRepeatableValue, [0, 1], [0, 1]),
+            borderRadius,
+        };
+    }, [borderRadius, height, backgroundColor, highlightColor, theme.appBG, theme.border]);
 
     React.useEffect(() => {
         if (!shouldHighlight || startHighlight) {