title: React Hook Invalid Usage
body: <p>I've been having an issue which returns the classic Hook issue:
  ×
  Error: 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>
  <p>Now it appears iv'e narrowed it done and it's my  div, which is a div with animated css. Please see the code below for the styled component:</p>
  <pre><code>const BackDrop = styled(motion.div)`
    position: absolute;
    width: 160%;
    height: 550px;
    border-radius: 50%;
    transform: rotate(60deg);
    top: -290px;
    left: -70px;
    background: #8360c3; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to right,
      #2ebf91,
      #8360c3
    ); /* Chrome 10-25, Safari 5.1-6 */
  `;
  </code></pre>
  <p>And it's inside of a function which I call to the App.js:</p>
  <pre><code>
  export function AccountBox(props) {
    const { initialActive } = props;
    const [isExpanded, setExpanded] = useState(false);
    const [active, setActive] = useState(
      initialActive ? initialActive : &quot;signin&quot;
    );
  
    const playExpandingEffect = () =&gt; {
      setTimeout(() =&gt; {
        setExpanded(false);
      }, expandingTransition.duration * 1000 - 1500);
    };
  
    const switchActive = (active) =&gt; {
      setTimeout(() =&gt; setActive(active), 400);
    };
  
    const switchToSignup = () =&gt; {
      playExpandingEffect();
      switchActive(&quot;signup&quot;);
    };
  
    const switchToSignin = () =&gt; {
      playExpandingEffect();
      switchActive(&quot;signin&quot;);
    };
  
    const contextValue = {
      switchToSignup,
      switchToSignin,
      playExpandingEffect,
    };
  
    return (
      &lt;AccountContext.Provider value={contextValue}&gt;
        &lt;BoxContainer&gt;
          &lt;TopContainer&gt;
            &lt;BackDrop
              variants={backdropVariants}
              transition={expandingTransition}
              initial={false}
              animate={isExpanded ? &quot;expanded&quot; : &quot;collapsed&quot;}
            /&gt;
            {active === &quot;signin&quot; &amp;&amp; (
              &lt;&gt;
                &lt;HeaderContainer&gt;
                  &lt;HeaderText&gt;Welcome&lt;/HeaderText&gt;
                  &lt;HeaderText&gt;Back&lt;/HeaderText&gt;
                &lt;/HeaderContainer&gt;
                &lt;SmallText&gt;Please sign-in to continue!&lt;/SmallText&gt;
              &lt;/&gt;
            )}
            {active === &quot;signup&quot; &amp;&amp; (
              &lt;&gt;
                &lt;HeaderContainer&gt;
                  &lt;HeaderText&gt;Create &lt;/HeaderText&gt;
                  &lt;HeaderText&gt;Account&lt;/HeaderText&gt;
                &lt;/HeaderContainer&gt;
                &lt;SmallText&gt;Please sign-up to continue!&lt;/SmallText&gt;
              &lt;/&gt;
            )}
          &lt;/TopContainer&gt;
          &lt;InnerContainer&gt;
            {active === &quot;signin&quot; &amp;&amp; &lt;LoginForm /&gt;}
            {active === &quot;signup&quot; &amp;&amp; &lt;SignupForm /&gt;}
          &lt;/InnerContainer&gt;
        &lt;/BoxContainer&gt;
      &lt;/AccountContext.Provider&gt;
    );
  }
  </code></pre>
  <p>Now is the issue that i'm calling the Hook incorrectly? I can see some documentation online however I can't figure out why this is an issue as it's called in the function.</p>
  <p>Does anybody knows!</p>