undesirable action is getting fired in useReducer hook even though correct action has been specified

Question

I am creating a calculator app, in which I have attached the ADD_DIGIT action to the decimal button and the CHOOSE_OPERATION action is added to operators.

I want the user can add decimal only once and I am using this condition inside ADD_DIGIT action for that purpose :-

if (state.firstDigit.includes(".")) {
        if (payload !== ".") {
          return {
            ...state,
            firstDigit: `${state.firstDigit}${payload}`,
            viewresult: false
          }
        }
      }

But this condition doesn't seem to be working. I console-logged the state whenever the CHOOSE_OPERATION action is fired which is fired every time the user uses operators in the calculator. The most surprising thing is that when the above condition is getting fulfilled inside the ADD_DIGIT action, the state is getting consoled which is inside the CHOOSE_OPERATION action. I have already rechecked that action that is attached to the decimal is the ADD_DIGIT action but still after meeting the above condition CHOOSE_OPERATION action is getting fired automatically.

The ADD_DIGIT action and CHOOSE_OPERATION action -

export const ACTIONS = {
  ADD_DIGIT: "add-digit",
  CHOOSE_OPERATION: "choose-operation",
  CLEAR: "clear",
  DELETE_DIGIT: "delete-digit",
  EVALUATE: "evaluate",
};

function reducer(state, { type, payload }) {
  switch (type) {

    case ACTIONS.ADD_DIGIT:

     if (payload == "0" && state.firstDigit == "0") {
    return {
      ...state,
      firstDigit: "0",
      viewresult: false
    }
  } else if (state.firstDigit.includes(".")) {
    if (payload !== ".") {
      return {
        ...state,
        firstDigit: `${state.firstDigit}${payload}`,
        viewresult: false
      }
    }
  }
  else if (payload !== "0" && state.firstDigit == "0") {
    return {
      ...state,
      firstDigit: `${payload}`,
      viewresult: false
    }
  } else {
    return {
      ...state,
      firstDigit: `${state.firstDigit}${payload}`,
      viewresult: false
    }
  }
      
   

    case ACTIONS.CHOOSE_OPERATION:
      console.log(state)
    

      // if we type new value after the result
      if (state.result !== "" && state.firstDigit !== "") {
        return {
          ...state,
          result: "",
          operator: payload,
        }
      }

      // to further do operations on the result value
      if (state.result !== "") {
        return {
          ...state,
          firstDigit: state.result,
          operator: payload,
        }
        // to just change the operator
      }

      else if (state.firstDigit !== "") {
        return {
          ...state,
          operator: payload,
          result: "",
        }
      }
}

useReducer state :-

 const [state, dispatch] = useReducer(reducer, {
    firstDigit: "",
    operator: "",
    secondDigit: "",
    result: "",
    viewresult: false
  })

decimal button :-

   <button onClick={() => dispatch({ type: ACTIONS.ADD_DIGIT, payload : "."})} style={style.keyColor}>.</button>

why CHOOSE_OPERATION action is getting fired when (state.firstDigit.includes(".")) condition is meeting inside ADD_DIGIT action ?