attempting to get transition property in css to apply on mount class change

[wispyco]

I am checking for the mount state inside the transitionstatus component. I then apply a visible or hidden class depending on the mount.

<TransitionState>
            {({ transitionStatus, exit, entry, mount }) => {
              return (
                <ImgAnimate>
                  <Img
                    className={`things-logo ${mount ? "visible" : "hidden"}`}
                    fluid={data.placeholderImage.childImageSharp.fluid}
                  />
                </ImgAnimate>
              )
            }}
          </TransitionState>

My css classes that get applied have a transition property on them with some easing. Is there a way to have them apply. Is it because the component is mounting and remounting that they don't get applied. Not sure. Im using styled components.

const ImgAnimate = styled.div`
  .things-logo {
    transition: all 2s ease-in-out;
  }
  .things-logo.hidden {
    overflow: hidden;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 400px;
    transition: all 2s ease-in-out;
  }
  .things-logo.visible {
    transform: scale(1);
    transition: all 2s ease-in-out;
  }
`

Thanks ahead of time