VueUse/Motion leave transition on element with 3 states

What I’m trying to make
I’m making a button with 3 states, i want the button to animate between these states using VueUse/Motion. When you click on the button the initial text should move out of view and the loading state comes in, after x seconds the loading state animates out and the text for the succes state moves in. After that the button resets.

What I have so far
I have it working up untill the leave transitions. When the buttonState changes it does the :enter animation nicely from the :inital position. So the state changes and new text comes in, but there is no leave transition yet. I have a codesandbox with this version: https://codesandbox.io/p/devbox/cml8ln

What I have tried
The @vueuse/motion docs have some small example about using the :leave transition but i’m not sure how this should work for my button. Here are the docs: https://motion.vueuse.org/features/variants#leave and here is the code of the example they mention in the docs: https://github.com/vueuse/motion/blob/main/playgrounds/vite/src/demos/Transitions.vue

So I tried to do something like this and play around with that but it doesn’t work:

<script setup>
import { useMotions } from '@vueuse/motion'
import { ref } from 'vue';

const motions = useMotions();

const buttonCopy = {
  idle: 'Click me now!',
  loading: 'Loading...',
  success: 'Success!',
}

const buttonState = ref('idle');

const startButtonAnimation = () => {
  buttonState.value = 'loading';
  setTimeout(() => {
    buttonState.value = 'success';
  }, 1750);
  setTimeout(() => {
    buttonState.value = 'idle';
  }, 3500);
}
</script>

<template>
  <div class="outer-wrapper">
    <button class="button" @click="startButtonAnimation">
      <transition
        :css="false"
        @leave="(_, done) => motions.button.leave(done)"
      >
        <span
          v-motion="'button'"
          :initial="{ opacity: 0, y: -25 }"
          :enter="{ opacity: 1, y: 0 }"
          :leave="{ opacity: 0, y: 25 }"
          :key="buttonState"
        >
          {{ buttonCopy[buttonState] }}
        </span>
      </transition>
    </button>
  </div>
</template>

No errors or something, either nothing happens or animations stop working all together. No errors/warnings.

Does anyone have an idea how to do this?