title: React-Semantic-UI Rating onRate() undefined value
body: <p>I want to create a star-rating system in ReactJS. 
  For this purpose, I am using React-Semantic-UI Rating. However, at the first click, it gives the state's initial value (which is a 0) and at the next clicks, it gives undefined values. I am glad if someone explains it in a react functional component but other methods are also acceptable :)    </p>
  
  <pre><code>import React, { useState } from 'react';
  import {
    Container,
    Rating
  } from 'semantic-ui-react';
  
      function App() {
        const [rating, setRating] = useState(0);
      ​
        function handleChangeOnRate(e) {
          e.preventDefault();
          setRating(e.target.value);
        }
      ​
        return (
          &lt;div className='App'&gt;
            &lt;Container&gt;
              &lt;Rating
                value={rating}
                onRate={(e) =&gt; {
                  handleChangeOnRate(e);
                  console.log(rating);
                }}
                maxRating={5}
                icon='star'
                size='huge'
              /&gt;
            &lt;/Container&gt;
          &lt;/div&gt;
        );
      }
      ​
      export default App;
  </code></pre>