title: How to make accordion menu using react & styled components
body: <p>I'm trying to create an accordion menu like the one from Bootstrap <a href="https://getbootstrap.com/docs/4.3/components/collapse/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.3/components/collapse/</a></p>
  
  <p>I have managed to get it to open and close fine, but I'm missing the smooth transition :/ </p>
  
  <p>It's like the transition is just not being applied.</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { useState } from 'react';
  import styled from 'styled-components';
  import { Button } from './common/button';
  
  const AccordionWrapper = styled.div`
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: var(--Secondary-color-dark);
      border-radius: 10px;
      height: auto;
      padding: 2%;
      text-align: center;
      transition: all 0.6s ease-in-out;
  `;
  
  const InternalWrapper = styled.div`
      width: 100%;
      max-height: ${(props) =&gt; (props.open ? '100%' : '0')};
      transition: all 1s ease-in-out;
      overflow: hidden;
  `;
  
  const Accordion = ({ title, subTitle, btnText }) =&gt; {
      const [ open, setOpen ] = useState(false);
      const handleClick = () =&gt; {
          setOpen(!open);
      };
      return (
          &lt;AccordionWrapper&gt;
              &lt;h2&gt;{title}&lt;/h2&gt;
              &lt;h3&gt;{subTitle}&lt;/h3&gt;
              &lt;InternalWrapper open={open}&gt;
                  &lt;h1&gt;Hello&lt;/h1&gt;
              &lt;/InternalWrapper&gt;
              &lt;Button padding="5px" onClick={handleClick}&gt;
                  {btnText}
              &lt;/Button&gt;
          &lt;/AccordionWrapper&gt;
      );
  };
  
  Accordion.defaultProps = {
      title    : 'title',
      subTitle : 'subtitle',
      btnText  : 'Read more &gt;&gt;'
  };
  
  export default Accordion;
  
  </code></pre>
  
  <p>Here is a codepen reproduction.
  <a href="https://codepen.io/hichihachi/pen/MWwKZEO?editors=0010" rel="nofollow noreferrer">https://codepen.io/hichihachi/pen/MWwKZEO?editors=0010</a></p>
  
  <p>Any help would be appreciated, thanks.</p>