diff --git a/airbyte-webapp/src/components/common/FormChangeTracker/FormChangeTracker.tsx b/airbyte-webapp/src/components/common/FormChangeTracker/FormChangeTracker.tsx
index b0be338e5508e..a8cb5d5d651fd 100644
--- a/airbyte-webapp/src/components/common/FormChangeTracker/FormChangeTracker.tsx
+++ b/airbyte-webapp/src/components/common/FormChangeTracker/FormChangeTracker.tsx
@@ -12,7 +12,7 @@ export const FormChangeTracker: React.FC<Props> = ({ changed, formId }) => {
   const id = useUniqueFormId(formId);
   const prevChanged = usePrevious(changed);
 
-  const { trackFormChange } = useFormChangeTrackerService();
+  const { trackFormChange, clearFormChange } = useFormChangeTrackerService();
 
   useEffect(() => {
     if (changed !== prevChanged) {
@@ -20,5 +20,13 @@ export const FormChangeTracker: React.FC<Props> = ({ changed, formId }) => {
     }
   }, [id, changed, trackFormChange, prevChanged]);
 
+  // when the form id changes or the change tracker gets unmounted completely,
+  // clear out the old form as it's not relevant anymore
+  useEffect(() => {
+    return () => {
+      clearFormChange(id);
+    };
+  }, [clearFormChange, id]);
+
   return null;
 };
diff --git a/airbyte-webapp/src/hooks/services/FormChangeTracker/hooks.ts b/airbyte-webapp/src/hooks/services/FormChangeTracker/hooks.ts
index 761e54e00950d..b12b1bfac5543 100644
--- a/airbyte-webapp/src/hooks/services/FormChangeTracker/hooks.ts
+++ b/airbyte-webapp/src/hooks/services/FormChangeTracker/hooks.ts
@@ -1,5 +1,5 @@
 import uniqueId from "lodash/uniqueId";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import { createGlobalState } from "react-use";
 
 import { FormChangeTrackerServiceApi } from "./types";
@@ -10,6 +10,8 @@ export const useUniqueFormId = (formId?: string) => useMemo(() => formId ?? uniq
 
 export const useFormChangeTrackerService = (): FormChangeTrackerServiceApi => {
   const [changedFormsById, setChangedFormsById] = useChangedFormsById();
+  const changedFormsByIdRef = useRef(changedFormsById);
+  changedFormsByIdRef.current = changedFormsById;
 
   const hasFormChanges = useMemo<boolean>(
     () => Object.values(changedFormsById ?? {}).some((changed) => !!changed),
@@ -22,18 +24,18 @@ export const useFormChangeTrackerService = (): FormChangeTrackerServiceApi => {
 
   const clearFormChange = useCallback(
     (id: string) => {
-      setChangedFormsById({ ...changedFormsById, [id]: false });
+      setChangedFormsById({ ...changedFormsByIdRef.current, [id]: false });
     },
-    [changedFormsById, setChangedFormsById]
+    [changedFormsByIdRef, setChangedFormsById]
   );
 
   const trackFormChange = useCallback(
     (id: string, changed: boolean) => {
-      if (Boolean(changedFormsById?.[id]) !== changed) {
-        setChangedFormsById({ ...changedFormsById, [id]: changed });
+      if (Boolean(changedFormsByIdRef.current?.[id]) !== changed) {
+        setChangedFormsById({ ...changedFormsByIdRef.current, [id]: changed });
       }
     },
-    [changedFormsById, setChangedFormsById]
+    [changedFormsByIdRef, setChangedFormsById]
   );
 
   return {