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;
-    }
-
-    setSnackbarOpen(false);
-  };
-
-  const action = (
-    <React.Fragment>
-      <IconButton
-        size='small'
-        aria-label='close'
-        color='inherit'
-        onClick={handleClose}
-      >
-        <CloseOutlined fontSize='small' />
-      </IconButton>
-    </React.Fragment>
-  );
-
   return (
     <div>
       <Snackbar
-        open={snackbarOpen}
+        open={errorSnackbarOpen}
         autoHideDuration={3000}
-        onClose={handleClose}
+        onClose={(event, reason) => {
+          if (reason !== 'clickaway') {
+            setErrorSnackbarOpen(false);
+          }
+        }}
         message={error}
-        action={action}
+        action={
+          <React.Fragment>
+            <IconButton
+              size='small'
+              aria-label='close'
+              color='inherit'
+              onClick={() => setErrorSnackbarOpen(false)}
+            >
+              <CloseOutlined fontSize='small' />
+            </IconButton>
+          </React.Fragment>
+        }
       >
-        <Alert onClose={handleClose} severity='error' sx={{ width: '100%' }}>
+        <Alert onClose={() => setErrorSnackbarOpen(false)} severity='error' sx={{ width: '100%' }}>
           {error}
         </Alert>
       </Snackbar>