diff --git a/src/components/MultiGestureCanvas/usePinchGesture.ts b/src/components/MultiGestureCanvas/usePinchGesture.ts
index 7f5cecc4e949..6f4cf761a0e4 100644
--- a/src/components/MultiGestureCanvas/usePinchGesture.ts
+++ b/src/components/MultiGestureCanvas/usePinchGesture.ts
@@ -104,6 +104,11 @@ const usePinchGesture = ({
         .enabled(pinchEnabled)
         // The first argument is not used, but must be defined
         .onTouchesDown((_evt, state) => {
+            // react-compiler optimization unintentionally make all the callbacks run on the JS thread.
+            // Adding the worklet directive here will make all the callbacks run on UI thread back.
+
+            'worklet';
+
             // We don't want to activate pinch gesture when we are swiping in the pager
             if (!shouldDisableTransformationGestures.get()) {
                 return;