I have several boxes that I want to animate through,

Here's a simple app example (Also a [codesandbox here](https://codesandbox.io/s/magical-lehmann-je63y?file=/src/App.js))

Each "box" should fade in and fade out, however, in this example, the animation happens isntantly.

```
const Box = styled.div`
  width: 100px;
  height: 100px;
  background: green;
`;

const Test = ({ isActive }) => {
  return (
    <motion.div
      animate={isActive ? { opacity: 1 } : { opacity: 0 }}
      transition={{ duration: 3 }}
    >
      <Box>hello world</Box>
    </motion.div>
  );
};

export default function App() {
  const [currentIndex, setCurrentIndex] = useState(0);

  const boxes = [
    {
      component: ({ isActive }) => <Test isActive={isActive} />
    },
    {
      component: ({ isActive }) => <Test isActive={isActive} />
    }
  ];

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div onClick={() => setCurrentIndex(currentIndex === 0 ? 1 : 0)}>
        {boxes.map((box, index) => {
          const isActive = index === currentIndex;
          return <box.component isActive={isActive} />;
        })}
      </div>
    </div>
  );

```