title: Transition not working with React useState hook and styled-component
body: <p>When I click the button the transition happens instantly. How can I add a smooth in-and-out transition? I want the whole  to slide nice and smooth when buttons are in focus.</p>
  <pre><code>
    const [margin, setMargin] = useState(&quot;-100vw&quot;);
    
    const setStyle = (margin) =&gt; {
      setMargin(margin);
    };
  
    const Box = styled.span`
      display: block;
      width: 150vw;
      margin-top: 0;
      height: 0;
  
      margin-left: ${margin};
  
      transition: all 0.8s 0.2s ease-in-out;
    `;
   
  
    return (
      &lt;Box&gt;
        &lt;Wrapper&gt;
          {children}
          &lt;p&gt;page contents&lt;/p&gt;
          &lt;button onMouseEnter={() =&gt; setStyle(&quot;-100vw&quot;)}&gt;Change&lt;/button&gt;
        &lt;/Wrapper&gt;
  
        &lt;TriangleLeft&gt;
          &lt;Closer&gt;
            &lt;button onMouseEnter={() =&gt; setStyle(&quot;0&quot;)}&gt;Change&lt;/button&gt;
          &lt;/Closer&gt;
        &lt;/TriangleLeft&gt;
      &lt;/Box&gt;
    );
  };
  
  
  </code></pre>
  <p>I am not sure if this is an issue with css or how i am handling the hooks...</p>