diff --git a/packages/nc-gui-v2/components/webhook/Drawer.vue b/packages/nc-gui-v2/components/webhook/Drawer.vue
index bd14e77d70..2c8462810d 100644
--- a/packages/nc-gui-v2/components/webhook/Drawer.vue
+++ b/packages/nc-gui-v2/components/webhook/Drawer.vue
@@ -8,24 +8,29 @@ const emit = defineEmits(['update:modelValue'])
 
 const editOrAdd = ref(false)
 
+const webhookEditorRef = ref()
+
 const dialogShow = computed({
   get() {
     return modelValue
   },
-  set(v) {
+  set(v: boolean) {
     emit('update:modelValue', v)
   },
 })
 
-function editHook(hook: Record<string, any>) {
+async function editHook(hook: Record<string, any>) {
   editOrAdd.value = true
-  // TODO: update editor ref hook
+  nextTick(async () => {
+    webhookEditorRef.value.hook = { ...hook }
+    await webhookEditorRef.value.onEventChange()
+  })
 }
 </script>
 
 <template>
   <a-drawer v-model:visible="dialogShow" :closable="false" placement="right" width="700px" @keydown.esc="dialogShow = false">
-    <WebhookEditor v-if="editOrAdd" @back-to-list="editOrAdd = false" />
+    <WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
     <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
     <div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center">
       <a-button v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank" size="large">