title: React state is changing but is not reflected on screen?
body: <p>I am using the <code>useState</code> hook to set <code>height</code> and <code>weight</code> values from 2 sliders I have to determine BMI.</p>
  <pre><code>  const [stats, setStats] = useState({
      height: 45,
      weight: 100,
      bmi: &quot;&quot;,
    });
  </code></pre>
  <p>I also have my <code>handleChange</code> and <code>calcBMI</code> functions like so</p>
  <pre><code>  const { weight, height, bmi } = stats;
  
    const handleChange = (e) =&gt; {
      setStats({ ...stats, [e.target.name]: e.target.value });
    };
  
    const calcBMI = () =&gt; {
      let kg = weight / 0.0022046;
      let heightInMeters = height / 39.37;
  
      let b = (kg / heightInMeters) ^ 2;
      setStats({ ...stats, bmi: b });
      return b;
    };
  </code></pre>
  <p>And the component returns this:</p>
  <pre><code> return (
      &lt;Fragment&gt;
        &lt;label&gt;
          Step 2: Input your Height... Current Height: {height}
          &lt;input
            id=&quot;typeinp&quot;
            name=&quot;height&quot;
            type=&quot;range&quot;
            min=&quot;45&quot;
            max=&quot;75&quot;
            defaultValue=&quot;45&quot;
            valueLabelDisplay=&quot;auto&quot;
            step=&quot;1&quot;
            onChange={(e) =&gt; handleChange(e)}
            aria-labelledby=&quot;discrete-slider-custom&quot;
          /&gt;
        &lt;/label&gt;
        &lt;label&gt;
          Step 3: Input your Weight... Current Weight: {weight}
          &lt;input
            id=&quot;typeinp&quot;
            name=&quot;weight&quot;
            type=&quot;range&quot;
            min=&quot;0&quot;
            max=&quot;390&quot;
            defaultValue=&quot;100&quot;
            valueLabelDisplay=&quot;auto&quot;
            step=&quot;1&quot;
            onChange={(e) =&gt; handleChange(e)}
            aria-labelledby=&quot;discrete-slider-custom&quot;
          /&gt;
        &lt;/label&gt;
        // NOT WORKING
        &lt;div&gt;Your Approximate BMI: {calcBMI}&lt;/div&gt;
      &lt;/Fragment&gt;
    );
  };
  </code></pre>
  <p>But in my code where i have <code>Your Approximate BMI</code>, nothing happens. I am able to console log the BMI, but it does not show up on the screen. I know that useState is async but the way I have my code I thought would avoid any issues around that.</p>