Transition when doesn't work in Framer Motion - reactjs

Question

I am using Framer Motion as an animation library in React project. I am trying to animate parent element after child element using when attribute. It doesn't work, because ContentVariants and ImgVariants are running simultaneously.
codesandbox
import React, { Component } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { motion } from "framer-motion";
export const ContentVariants = {
expanded: () => ({
width: "150px",
transition: {
when: "afterChildren",
duration: 2
}
}),
collapsed: () => ({
width: "50px",
transition: {
when: "afterChildren",
duration: 2
}
})
};
export const Content = styled(motion.div)`
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background-color: burlywood;
padding: 30px;
height: 500px;
`;
export const ToggleBtn = styled.button`
padding: 5px 10px;
cursor: pointer;
display: flex;
width: auto;
align-self: flex-end;
`;
export const ImgVariants = {
expanded: {
width: "100px",
scale: 1,
transition: {
duration: 2
}
},
collapsed: {
scale: 0.5,
transition: {
duration: 2
}
}
};
const Img = styled(motion.img)``;
class App extends Component {
state = {
collapsed: false
};
toggle = () => {
this.setState({ collapsed: !this.state.collapsed });
};
render() {
const { collapsed } = this.state;
return (
<div>
<Content
initial={collapsed ? "collapsed" : "expanded"}
animate={collapsed ? "collapsed" : "expanded"}
variants={ContentVariants}
>
<Img
src="https://picsum.photos/200/200"
initial={collapsed ? "collapsed" : "expanded"}
animate={collapsed ? "collapsed" : "expanded"}
variants={ImgVariants}
/>
<ToggleBtn onClick={this.toggle}>toggle</ToggleBtn>
</Content>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
If I change when: "afterChildren" to when: "beforeChildren" in ContentVariants, it doesn't do any difference. Even if I remove when attribute, animations are running simultaneously.

Answer 1

Documentation propagation section (https://www.framer.com/api/motion/animation/#propagation) says that
If a motion component has children, changes in variant will flow down
through the component hierarchy. These changes in variant will flow
down until a child component defines its own animate property.
You have to remove the animate prop from Img elements.
https://codesandbox.io/s/gallant-goldwasser-dwiz2

Answer 2

If you set an animation on your child, your parent won't pass it's animation logic to it. Thus you have to remove the initial and animate property from you <Img> component:
<Img
src="https://picsum.photos/200/200"
variants={ImgVariants}
/>
You can look at this example from the official docs for a reference: https://www.framer.com/api/motion/types/#orchestration.when