diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index e54f57c0a4..e0f8a287d3 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -24,6 +24,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
   const { t } = useTranslation()
   const {
     inputs,
+    handleUserActionAdd,
     handleUserActionChange,
     handleUserActionDelete,
     handleTimeoutChange,
@@ -41,7 +42,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
           <div className='flex items-center px-1'>
             <ActionButton
               onClick={() => {
-                inputs.userActions.push({
+                handleUserActionAdd({
                   id: uuid4(),
                   name: 'Action',
                   text: 'Button Text',
diff --git a/web/app/components/workflow/nodes/human-input/use-config.ts b/web/app/components/workflow/nodes/human-input/use-config.ts
index 148c4d5c83..09effafe23 100644
--- a/web/app/components/workflow/nodes/human-input/use-config.ts
+++ b/web/app/components/workflow/nodes/human-input/use-config.ts
@@ -8,6 +8,13 @@ const useConfig = (id: string, payload: HumanInputNodeType) => {
   const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const { inputs, setInputs } = useNodeCrud<HumanInputNodeType>(id, payload)
 
+  const handleUserActionAdd = (newAction: UserAction) => {
+    setInputs({
+      ...inputs,
+      userActions: [...inputs.userActions, newAction],
+    })
+  }
+
   const handleUserActionChange = (updatedAction: UserAction) => {
     const newActions = produce(inputs.userActions, (draft) => {
       const index = draft.findIndex(a => a.id === updatedAction.id)
@@ -38,6 +45,7 @@ const useConfig = (id: string, payload: HumanInputNodeType) => {
   return {
     readOnly,
     inputs,
+    handleUserActionAdd,
     handleUserActionChange,
     handleUserActionDelete,
     handleTimeoutChange,