diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/ConnectGDCSourceWidget.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/ConnectGDCSourceWidget.tsx
index 73f8dcef65a..44eba037b32 100644
--- a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/ConnectGDCSourceWidget.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/ConnectGDCSourceWidget.tsx
@@ -13,8 +13,10 @@ import { hasuraToast } from '../../../../new-components/Toasts';
 import { useAvailableDrivers } from '../../../ConnectDB/hooks';
 import { OpenApi3Form } from '../../../OpenApi3Form';
 import { useMetadata } from '../../../hasura-metadata-api';
+import { Source } from '../../../hasura-metadata-types';
 import { useManageDatabaseConnection } from '../../hooks/useManageDatabaseConnection';
 import { DisplayToastErrorMessage } from '../Common/DisplayToastErrorMessage';
+import { cleanEmpty } from '../ConnectPostgresWidget/utils/helpers';
 import { GraphQLCustomization } from '../GraphQLCustomization/GraphQLCustomization';
 import { adaptGraphQLCustomization } from '../GraphQLCustomization/utils/adaptResponse';
 import { Template } from './components/Template';
@@ -25,8 +27,6 @@ import {
   useFormValidationSchema,
 } from './useFormValidationSchema';
 import { generateGDCRequestPayload } from './utils/generateRequest';
-import { Source } from '../../../hasura-metadata-types';
-import { cleanEmpty } from '../ConnectPostgresWidget/utils/helpers';
 
 interface ConnectGDCSourceWidgetProps {
   driver: string;
@@ -129,6 +129,11 @@ export const ConnectGDCSourceWidget = (props: ConnectGDCSourceWidgetProps) => {
     methods: { formState, reset },
   } = useConsoleForm({
     schema,
+    options: {
+      defaultValues: {
+        template_variables: [],
+      },
+    },
   });
 
   useEffect(() => {
diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/components/TemplateVariables.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/components/TemplateVariables.tsx
index 23532ccf5e6..dc158b3b245 100644
--- a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/components/TemplateVariables.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/components/TemplateVariables.tsx
@@ -108,7 +108,7 @@ export const TemplateVariables = () => {
         ),
       }),
     ],
-    []
+    [remove]
   );
 
   const table = useReactTable({
diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/useFormValidationSchema.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/useFormValidationSchema.tsx
index 391d9d3f588..f1807b9fa33 100644
--- a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/useFormValidationSchema.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/useFormValidationSchema.tsx
@@ -26,6 +26,10 @@ const createValidationSchema = (configSchemas: GDCConfigSchemas) =>
       .gte(0, { message: 'Timeout must be a postive number' })
       .optional(),
     template: z.string().optional(),
+
+    // template variables is not marked as optional b/c it makes some pretty annoying TS issues with react-hook-form
+    // the field is initialized with a default value of `[]`
+    // with clean up empty fields, including arrays before submission, so it won't be sent to the server if the array is empty
     template_variables: z
       .object({
         name: reqString('variable name'),