use custom hook to rerender workflow instead of reloading full page.

src/hooks/useApprovalWorkflow.tsx

@@ -0,0 +1,24 @@
+import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import axios from "axios";
+import { useCallback, useEffect, useState } from "react";
+
+export default function useApprovalWorkflow(id: string) {
+  const [workflow, setWorkflow] = useState<ApprovalWorkflow>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = useCallback(() => {
+    setIsLoading(true);
+    axios
+      .get<ApprovalWorkflow>(`/api/approval-workflows/${id}`)
+      .then((response) => setWorkflow(response.data))
+      .catch((error) => {
+        setIsError(true);
+      })
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  useEffect(getData, [getData]);
+
+  return { workflow, isLoading, isError, reload: getData };
+}