unwrap delete call to handle success and error correctly

src/components/IOC/IOCDelete/IOCDelete.jsx

-import { useState, useEffect, useCallback } from "react";
+import { useState, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { Box, Button, Grid, Tooltip, Typography } from "@mui/material";
 import { ConfirmDangerActionDialog } from "@ess-ics/ce-ui-common";
@@ -12,30 +12,7 @@ export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => {
   const showSnackBar = useCustomSnackbar();
   const [error, setError] = useState();
   const [open, setOpen] = useState(false);
-  const [deleteIOC, { data: deleteIOCResponse, error: deleteIOCError }] =
-    useDeleteIocMutation();
-
-  useEffect(() => {
-    if (deleteIOCError) {
-      setButtonDisabled(false);
-      setError(deleteIOCError);
-    }
-  }, [deleteIOCError, setError, setButtonDisabled]);
-
-  useEffect(() => {
-    if (deleteIOCResponse) {
-      setButtonDisabled(false);
-      showSnackBar(`IOC ${ioc.namingName} deleted`, "success");
-      navigate("/iocs");
-    }
-  }, [
-    deleteIOCResponse,
-    navigate,
-    error,
-    setButtonDisabled,
-    ioc.namingName,
-    showSnackBar
-  ]);
+  const [deleteIOC] = useDeleteIocMutation();
 
   let disabledButtonTitle = "";
 
@@ -48,12 +25,19 @@ export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => {
     setOpen(false);
   }, [setOpen]);
 
-  const onConfirm = useCallback(() => {
+  const onConfirm = useCallback(async () => {
     setButtonDisabled(true);
-    deleteIOC({
-      iocId: ioc?.id
-    });
-  }, [ioc, deleteIOC, setButtonDisabled]);
+    deleteIOC({ iocId: ioc.id })
+      .unwrap()
+      .then(() => {
+        showSnackBar(`IOC ${ioc.namingName} deleted`, "success");
+        navigate("/iocs", { replace: true });
+      })
+      .catch((error) => {
+        setError(error);
+        setButtonDisabled(false);
+      });
+  }, [ioc, deleteIOC, setButtonDisabled, navigate, showSnackBar]);
 
   return (
     <>