title: onClick animation not trigerring
body: <p>So the problem I am having is this, here I have a pushLogic, so the thing  I am trying to achieve is this, when I press the button I wanna start the animation, I want spinner to start spinning but for some reason it is not doing it.</p>
  <pre><code>  const [spinnerOne, setSpinnerOne] = useState(true);
  
    const push= ()=&gt;{ 
      setSpinnerOne(true)
      setTimeout(()=&gt;{
       history.push('/')
      },3000)
   
   }
    return (
       &lt;div&gt;
         &lt;span className={spinnerOne  ? `spinnerOne` :''}&gt;&lt;/span&gt;
         &lt;button onClick={push} &gt;&lt;/button&gt;
      &lt;/div&gt;
  
  </code></pre>
  <p>css</p>
  <pre><code>
  @keyframes spinnerOne {
    to {
      transform: rotate(360deg);
    }
  }
  .spinnerOne:before {
    content: &quot;&quot;;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-top: -120px;
    margin-left: -50px;
    border-radius: 50%;
    border: 5px solid #b409ca;
    border-top-color: #3500c8;
    border-right-color: rgb(221, 7, 0);
    border-bottom-color: rgb(246, 98, 0);
    animation: spinnerOne 2s linear infinite
  }
  </code></pre>