fix: resolve problem when mutation is called multiples times

apps/eo_web/src/screens/Cancer/CancerThankYou.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useMutation } from "@tanstack/react-query";
 import axios from "axios";
 import { useNavigate, useSearchParams } from "react-router-dom";
@@ -25,10 +25,13 @@ export const CancerThankYou = () => {
     navigate(ROUTES.cancerProfile);
   }
 
+  const [callApi, setCallApi] = useState(true);
+
   const { postCancerFormSubmission } = useElixirApi();
 
   const { mutate } = useMutation({
     mutationFn: () => postCancerFormSubmission({ submission_id }),
+    mutationKey: ["postCancerFormSubmission", submission_id],
     onError: (result) => {
       if (axios.isAxiosError(result)) {
         if (result.response?.status !== 200) {
@@ -41,8 +44,15 @@ export const CancerThankYou = () => {
   });
 
   useEffect(() => {
-    mutate();
-  }, []);
+    if (callApi) {
+      setCallApi((prevState) => {
+        if (prevState) {
+          mutate();
+        }
+        return false;
+      });
+    }
+  }, [mutate]);
 
   return (
     <LayoutDefault>