Updated snackbar handling

src/component/Telepay.js

@@ -21,7 +21,7 @@ const TelepayForm = () => {
       { description: '', amount: '' },
     ],
   });
-  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
+  const [errorSnackbarOpen, setErrorSnackbarOpen] = React.useState(false);
   const [submitted, setSubmitted] = React.useState(false);
 
   const handleChange = (field, value) => {
@@ -69,11 +69,11 @@ const TelepayForm = () => {
       } else {
         const errorData = await response.json();
         setError(errorData.error || 'An error occurred');
-        setSnackbarOpen(true);
+        setErrorSnackbarOpen(true);
       }
     } catch (error) {
       setError('An error occurred while making the API request');
-      setSnackbarOpen(true);
+      setErrorSnackbarOpen(true);
     } finally {
       setSubmitted(false);
     }
@@ -88,37 +88,31 @@ const TelepayForm = () => {
     });
   };
 
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return;
+  return (
+    <div>
+      <Snackbar
+        open={errorSnackbarOpen}
+        autoHideDuration={3000}
+        onClose={(event, reason) => {
+          if (reason !== 'clickaway') {
+            setErrorSnackbarOpen(false);
           }
-
-    setSnackbarOpen(false);
-  };
-
-  const action = (
+        }}
+        message={error}
+        action={
           <React.Fragment>
             <IconButton
               size='small'
               aria-label='close'
               color='inherit'
-        onClick={handleClose}
+              onClick={() => setErrorSnackbarOpen(false)}
             >
               <CloseOutlined fontSize='small' />
             </IconButton>
           </React.Fragment>
-  );
-
-  return (
-    <div>
-      <Snackbar
-        open={snackbarOpen}
-        autoHideDuration={3000}
-        onClose={handleClose}
-        message={error}
-        action={action}
+        }
       >
-        <Alert onClose={handleClose} severity='error' sx={{ width: '100%' }}>
+        <Alert onClose={() => setErrorSnackbarOpen(false)} severity='error' sx={{ width: '100%' }}>
           {error}
         </Alert>
       </Snackbar>