title: TSX CSS conditional rendering always giving true statment
body: <p><a href="https://i.stack.imgur.com/Aq3mQ.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>transform: aboutMe =&gt; (aboutMe ? &quot;translateY(-500%)&quot; : &quot;translateY(0%)&quot;)</p>
  <p>So I used to run my React project and use MaterialUi's MakeStyles to include the CSS in the same tsx file and benefit from the JavaScript code to do conditional renderings. Now I am changing my project to Gatsby, but for some reason the above code isn't working and it's considering the statment to be true all the time although I'm console logging it and it's working the way it's supposed to. Any idea why here the statment is always considered true?</p>
  <pre><code>import React from &quot;react&quot;
  import { StaticImage } from &quot;gatsby-plugin-image&quot;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;
  interface Props {
    aboutMe: boolean
    aboutMeOpen: () =&gt; void
  }
  export default function Background(props: Props) {
    const classes = useStyles()
    const { aboutMe, aboutMeOpen } = props
    return (
      &lt;div className={classes.body}&gt;
        &lt;div className={classes.effect}&gt;
          &lt;StaticImage
            src=&quot;../../images/backgroundEffect.png&quot;
            alt=&quot;effect&quot;
            quality={50}
            draggable={false}
          /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  const useStyles = makeStyles({
    effect: {
      zIndex: 10,
      position: &quot;absolute&quot;,
      bottom: 0,
      right: 0,
      // userSelect: &quot;none&quot;,
      // height: &quot;100%&quot;,
      transition: &quot;0.5s&quot;,
      transform:  aboutMe =&gt; ( aboutMe ? &quot;translateY(100%)&quot; : &quot;translateY(0%)&quot;),
    },
  })
  </code></pre>