React native reanimated runOnJs - does not update state every time

Question

I have a list of items that should change state when they are swiped passed a certain threshold. I'm using runOnJs to call a function to change the state. Now when I swipe an item the first time, it updates it's state but every swipe after that does nothing. Can someone please explain to me what I'm missing here?

let [cleaned, setCleaned] = useState(false);

let handleCleanPress = () => {
    console.log(clean);
    setCleaned(!cleaned);
    translateX.value = withTiming(0);
  };

let panGesture = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>({
    onStart: (_, context) => {
      context.startX = translateX.value;
    },
    onActive: (event, context) => {
      let start = context.startX + event.translationX;
      if (start < 0) {
        translateX.value = start;
      }
    },
    onEnd: () => {
      let shouldTriggerClean = translateX.value < translateXThreshold;
      translateX.value =
        translateX.value >= snapThreshold && translateX.value < -BUTTON_WIDTH
          ? withTiming(snapPoint, { duration: 200 })
          : withTiming(0, { duration: 200 });

      if (shouldTriggerClean) {
        runOnJS(handleCleanPress)();
      }
    },
  });

Answer 1

Feels a bit wrong doing it like this but it works. Maybe someone can suggest a better way or confirm this is correct?

  let setCleanState = () => {
    setCleaned(!cleaned);
  };

  let handleCleanPress = () => {
    translateX.value = withTiming(0, { duration: 200 }, (finished) => {
      if (finished) {
        runOnJS(setCleanState)();
      }
    });
  };