How to integrate xState v5 with Framer motion

Question

I'm trying to learn how to integrate Framer motion animations with xState V5 on React.

My idea is to render some animation when the UI goes from one state to the other:

Close state -> (opening animation state) -> Open state -> (closing animation state)

My main problem is how to trigger an animation for a specific state and how to detect it has finished to jump to the following state.

Exists already an example for xState v4 which apparently passes some Framer motion animations to the machine (codesandbox, github) but it gives some typescript errors when I apply it to xState v5.

You can see my try on here.

Thanks for reading! All ideas welcome.