State only update when I click button twice

Hey everyone,

I’m currently working on a side project (an expense tracker). The project is currently on hold due to a logic bug I couldn’t solve and I will need y’all to figure out the problem.

Overview of the Project (Expenses page):

To create an expenses, you have to -

1.) Click a category e.g Rent: this will set the expense category to setExpenseCategory('Rent)
2. ) enter an amount
3.) click create button

The Problem:

  • from the console inside the onclick function, When I clicked a particular category , the category value doesn’t change unless I click the category twice.
  • from the console outside the onclick function, the category value changes on first click

what I have tried
I added the category state as a dependency to the useEffect so that the component re-renders when the category changes. This haven’t still solve the bug

Link to repo:
https://github.com/FesoQue/ExpenseTracker

Link to particular component (Expenses.jsx):
https://github.com/FesoQue/ExpenseTracker/blob/main/src/pages/Expenses.jsx

You could have a look at the useState() hook to manage the state