Я пытаюсь реализовать Api в моем демонстрационном приложении React redux Когда я дважды нажимаю на событие, вызываемое моим вызовом Api

Привет, я пытаюсь реализовать поддельный API в моем демонстрационном приложении React Redux, когда я запускаю событие Я получаю ответ дважды Я не знаю, где я ошибся здесь Я делюсь своим кодом, просмотрите его

User.tsx

import React, { useState } from 'react';

import { useDispatch, useSelector } from "react-redux";
import { RootState } from "./Store";
import { GetUser } from './actions/UserActions';

function User() {
    const dispatch = useDispatch();
    const [userName, setUserName] = useState("");
    const userState = useSelector((state: RootState) => state.user);
    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setUserName(event.target.value);
    const handleSubmit = () => dispatch(GetUser(userName));

    return (
        <div >
            <input type="text" onChange={handleChange} />
            <button onClick={handleSubmit}>Search</button>
        </div>
    );
}

export default User;

UserActions.tsx

import { Dispatch } from "redux"
import {
  UserDispatchTypes,
  // UserType,
  USER_FAIL,
  USER_LOADING,
  USER_SUCCESS,
} from "./UserActionTypes"
import axios from "axios"

export const GetUser = (user: string) => async (
  dispatch: Dispatch<UserDispatchTypes>
) => {
  try {
    dispatch({
      type: USER_LOADING,
    })
    console.log("USer Action load")
    
    const articleAPI = "https://reqres.in/api/articles"
    
   const article = { title: "React Hooks POST Request Example" }
    

    
    const res1 = await axios.post(
      articleAPI,
      article 
      // , {
    )
    console.log(res1.data, "res1 response")
    dispatch({
      type: USER_SUCCESS,

      payload: res1.data,
    })
  } catch (e) {
    dispatch({
      type: USER_FAIL,
    })
  }
}

UserREducer

import {
  UserDispatchTypes,
  UserType,
  USER_FAIL,
  USER_LOADING,
  USER_SUCCESS,
} from "../actions/UserActionTypes"


interface DefaultStateI {
  loading: boolean
  user?: UserType
}

const defaultState: DefaultStateI = {
  loading: false,
}

const userReducer = (
  state = defaultState,
  action: UserDispatchTypes
): DefaultStateI => {
  switch (action.type) {
    case USER_FAIL:
      return {
        ...state,
        loading: false,
      }
    case USER_LOADING:
      return {
        ...state,
        loading: true,
      }
    case USER_SUCCESS:
      return {
        ...state,
        loading: false,
        user:res1.data
      }
    default:
      return state
  }
}

export default userReducer

UseerActionTypes

export const USER_LOADING = 'USER_LOADING'
export const USER_FAIL = 'USER_FAIL'
export const USER_SUCCESS = 'USER_SUCCESS'

export type UserType = { userData: UserAbility[] }


export type UserAbility = {
    user: {
        name: string

        mobile_No: number
    }
}
export interface UserLoading {
    type: typeof USER_LOADING
}

export interface UserFail {
    type: typeof USER_FAIL
}

export interface UserSuccess {
    type: typeof USER_SUCCESS,
    payload: UserType
}

export type UserDispatchTypes = UserLoading | UserFail | UserSuccess

код работает нормально, но когда я дважды вижу вызов API консоли браузера