Buttons are not doing what they are supposed to do, adding to good, neutral, bad feedback.

Curiously, I added a default button that uses different syntax to add to bad, and it works. So there is something wrong with my "giveGoodFeedback" functions.

import React, { useState } from 'react'


const Button = (props) => {
  return (
    <button onClick={props.handleClick}>
      {props.text}
    </button>)
}

const App = () => {
  // save clicks of each button to its own state
  const [good, setGood] = useState(0)
  const [neutral, setNeutral] = useState(0)
  const [bad, setBad] = useState(0)

  const giveGoodFeedback = () => {
    setGood( good + 1 )
  }

  const giveNeutralFeedback = () => {
    setNeutral( neutral + 1 )
  }

  const giveBadFeedback = () => {
    setBad( bad + 1 )
    console.log('Bad increases')
  }

  return (
    <div>
      <h1>give feedback</h1>
      <Button text='good' onClick={giveGoodFeedback}/>
      <Button text='bad' onClick={giveBadFeedback}/>
      <Button text='neutral' onClick={giveNeutralFeedback}/>
      <button onClick={() => setBad(bad + 1)}>
        Click me
      </button>
      <h1>Statistics</h1>
      <ul>
        <li>good : {good}</li>
        <li>neutral : {neutral}</li>
        <li>bad : {bad}</li>
      </ul>
      code here
    </div>
  )
}

export default App;