basically, it was me wondering about the useReducer hook
it obviously takes a reducer function as the first argument
now when I define this reducer function within the component, the basic example code I've posted above fails
but it works perfectly fine once I put the reducer function OUTSIDE of the component.
why is that so?