Why would I get undefined payload from reducer?

Question

I am trying to get the error message in the reducer so that I can later show it on the front-end. I am getting the error message in the actions. But in reducer I am getting the following value: {type: 'OTP_ERROR', payload: undefined}

Actions:

  async (
    dispatch: React.Dispatch<Actions>,
    loadingDispatch: React.Dispatch<LoadingActions>
  ) => {
    try {
      startLoading(loadingDispatch);
      const result = await axios.post(`${DJANGO_URL}/verify-otp/`, data)
      console.log(">>>>>>>>>>> from actions", result)
      stopLoading(loadingDispatch);
      dispatch({
        type: OTP,
        payload: result?.data
      });
    }
    catch (err) {
      const error: any = err
      stopLoading(loadingDispatch)
      dispatch({
        type: OTP_ERROR,
        payload: error.response ? data?.message
          : "Failed to connect with the server"
      })
      console.log(">>>>>>>>>>> from actions error", error.response.data.message)
    }
  }

Reducers:

import {
    CLEAR_ERRORS,
    OTP,
    OTP_ERROR,
    RESEND_OTP,
    RESEND_OTP_ERROR
} from "../actions/Types";
export type Actions =
    | {
        type: typeof OTP;
        payload: string;
    }
    | {
        type: typeof OTP_ERROR;
        payload: string;
    }
    | {
        type: typeof CLEAR_ERRORS;
    };

interface UserOtpInterface {
    error: String | null;
    otpSuccess: string | null;
    otpError: string | null;
    resendOtpSuccess: string | null;
    resendOtpError: string | null;
}

export type State = UserOtpInterface;

export const initialState: State = {
    error: null,
    otpSuccess: null,
    otpError: null,
 

};

export const Otp = (state: State = initialState, action: Actions) => {
    // switch between action type
    console.log("from otp reducers", action)
    switch (action.type) {
        case OTP:
            return {
                ...state,
                otpSuccess: action.payload
            };
        case OTP_ERROR:
            return {
                ...state,
                otpError: action.payload
            };
        
        case CLEAR_ERRORS:
            return {
                ...state,
                error: null,
                otpSuccess: null,
                resendOtpSuccess: null,
            };
        default:
            return state;
    }
};

what I am doing wrong that I would get the payload as undefined. The error message from the actions is : "Incorrect pin". I am not able to get the same error from the reducers.