React: Animate ternary output components - css

Question

I'm surprised by the issue im having with this simple animation procedure. I have a ternary that displays one series of components or another based on a condition. My first thought was to wrap them in a div that animates them once they appear. Unfortunately, its only animating the first condition on page load, switching tabs has no effect. Any thoughts?
const dashboard = () => {
const [pane, setPane] = useState(0);
const props = useSpring({ opacity: 1, from: { opacity: 0 } });
return (
...
<MainContent>
{pane === 0 ? (
<animated.div style={props}>
<LastModuleWidget {...mockLastModule} />
<BookmarkedModules />
<LatestActivity />
</animated.div>
) : (
<animated.div style={props}>
<StatsModule />
<PreviouslyCompleted />
</animated.div>
)}
</MainContent>
...
)};
Moving the animation wrapper immediately outside of the ternary had no effect.
I've tried it with Springs (above) and my own implementation, no effect.

Answer 1

Ok, so the core issue is that my MainContent container did not have a key prop.
<MainContent key={pane}>
{pane === 0 ? (
<_AnimateFadeIn>
<LastModuleWidget {...mockLastModule} />
<BookmarkedModules />
<LatestActivity />
</_AnimateFadeIn>
) : (
<_AnimateFadeIn>
<BookmarkedModules />
<LatestActivity />
</_AnimateFadeIn>
)}
</MainContent>
also, for simplicity i reverted back to using my own animation since its a simple fade in:
const _AnimateFadeIn = styled.div`
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
animation: fadeIn 0.7s;
`;
I'm using styled-components. If you want to recreate this in CSS just write something like:
div className="_animateFadeIn" or whatever. Same thing.