title: NEXT JS ver^12 Error: Invalid hook call (useTransition of react-spring)
body: <p>I use react-spring to create this HOC for animating wrapped components but when running NEXT gives the error:
  Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:</p>
  <ol>
  <li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
  <li>You might be breaking the Rules of Hooks</li>
  <li>You might have more than one copy of React in the same app</li>
  </ol>
  <p><strong>/components/Animation/Animation.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { useSpring, useTransition, animated } from &quot;react-spring&quot;;
  
  export default function Animation() {
    return &lt;div&gt;&lt;/div&gt;;
  }
  
  Animation.Fade = function AnimateFade({ children, style, ...props }) {
    const arrChild = React.Children.toArray(children);
    const transition = useTransition(arrChild, {
      keys: (item) =&gt; item.key,
      from: { opacity: 0 },
      enter: { opacity: 1 },
      leave: { opacity: 0 },
      config: { duration: 600 },
    });
    return transition(
      (prop, item) =&gt;
        item &amp;&amp; (
          &lt;animated.div style={prop} {...props}&gt;
            {item}
          &lt;/animated.div&gt;
        )
    );
  };
  </code></pre>