React-Spring: How to trigger a function when enter or leave animation is finished?

Question

In the start of my game, the chip's enter animation will be triggered.

When the player finally placed their bets, the leave animation for the chips will be triggered. It will be then followed by the cards animations, as well as those texts.

Question: What is the approach to make the either animations trigger when the other animation is finished (E.g. When chip's leave animation is done, then the card's enter animation will trigger and vice versa)? Because they are overriding each other's animation.

My Attempt: I tried using onRest and onStart to toggle a boolean state but they are both triggering on enter and leave animations. Is there something like "onLeave" and "onEnter" for react-spring that can perform functions for the animation?

Code:

import { useTransition } from 'react-spring';

export function useCardTransition(cards) {
    const cardTransitions = useTransition(cards, {
        from: {
            transform: 'translate(100px, -1000px) rotate(-180deg)',
        },
        enter: (item, index) => ({
            transform: `translate(${0}px, 0px) rotate(-${365 - (index * 1)}deg)`,
            marginLeft: `${75 * (cards.length - 1)}px`
        }),
        leave: {
            transform: 'translate(-100px, -1000px) rotate(-360deg)',
        },
        trail: 100,
    });

    return cardTransitions;
}

export function useChipTransition(chips) {
    const chipTransitions = useTransition(chips, {
        from: {
            transform: 'translate(0, 500px)',
        },
        enter: (item, index) => ({
            transform: `translate(${0}px, 0px)`,
        }),
        leave: {
            transform: 'translate(0, 500px)',
        },
        trail: 100,
        config: { tension: 200, friction: 20 },
    });

    return chipTransitions;
}