Re-rendering a child when its prop changes in onRest

[Sp1d3rbite]

Hi there,

I have prototype where the user steps through a chat-like conversation.
Right now the user picks an option and it, and the responses to it, will display in order because the array they're in gets updated. To be clear, this part works excellent!

What I wanted to add was the ability to first display a message with a '...', as if the recipient is typing, and after the animation of that particular message is completed, switch to the final text.

I assumed this would pretty easy with the onRest event. Just flip the boolean there, the state change notifies the child, which listens to that with an useEffect, which updates the test accordingly.

But this seems not the case.
It IS updating the boolean properly, just not updating the component. I know this because the messages remain on '...' UNTIL I hover my mouse over it, updating the text instantly.
What else is strange is that when debugging the boolean value at the top of the component whenever it renders it is always true (even though I'm expecting it to be false at first)

 const transitions = useTransition(
        currentConversation.map(data => ({ ...data, itemIndex: currentConversation.indexOf(data), finishedAnim: false})),
        {
            key: (item: any) => item.itemIndex,
            from: { opacity: 0 },
            enter: { opacity: 1 },
            trail: 1000,
            delay: 300,
            onStart: (animResult, controller, item) => {
                item.finishedAnim = false;
                console.log("before", item.finishedAnim)
                // returns false
            },
            onRest: (animResult, controller, item) => {
                item.finishedAnim = true;
                console.log("after", item.finishedAnim)
                // returns true
            },
        }
    )

// a little further where I'm rendering
const displayDialogue = () => {
        return (
            <>
                {transitions((style, item) => (
                    <animated.div key={item.itemIndex} style={style}>
                        <DialogueNode key={item.itemIndex} state={item}/>
                    </animated.div>
                ))}
            </>
        )
    }

Below is a gif showcasing the hover behaviour.

Anyone got a clue what I'm missing? Not really sure if the issue is React-Spring related but it seems my implementation of the transitions has an effect on it.

Thanks in advance.