Different alerts for statuses

src/App.tsx

@@ -1,4 +1,4 @@
-import { Alert, Grow, Rating, Typography } from "@mui/material";
+import { Alert, Grow, Rating, Slide, Typography } from "@mui/material";
 import "./App.css";
 import ButtonRow, { ActionProps } from "./components/ButtonRow";
 import ReviewField, { ReviewFieldProps } from "./components/ReviewField";
@@ -9,6 +9,9 @@ function App() {
   const [showAlert, changeAlert] = useState(false);
   const [alertText, changeAlertText] = useState("");
 
+  const [showInfo, changeInfo] = useState(false);
+  const [infoText, changeInfoText] = useState("");
+
   const fields: ReviewFieldProps[] = [
     {
       name: "Name",
@@ -42,22 +45,26 @@ function App() {
         content: fields[2].dynamicState[0]
       })
     })
-    .then(async ({ json }) => {
-      const result = await json();
+    .then(async (response) => {
+      const result = await response.json();
 
-      changeAlertText(result.error ? `${result.error.type}: ${result.error.message}` : `Success: ${result.message}`);
+      changeInfoText(result.error ? `${result.error.type}: ${result.error.message}` : `Success: ${result.message}`);
+
+      changeInfo(true);
+
+      setTimeout(() => {
+        changeInfo(false);
+      }, 2000);
     })
-    .catch((err) => changeAlertText(err.toString()));
-
-      if (showAlert) {
-        return;
-      }
+    .catch((err) => {
+      changeAlertText(err.toString());
       
       changeAlert(true);
 
       setTimeout(() => {
         changeAlert(false);
       }, 2500);
+    });
   }
 
   const buttons: ActionProps[] = [
@@ -73,8 +80,14 @@ function App() {
     },
   ];
 
-  const alert = (
+  const info = (
     <Alert severity="info">
+      {infoText}
+    </Alert>
+  );
+
+  const alert = (
+    <Alert severity="error">
       {alertText}
     </Alert>
   );
@@ -108,9 +121,13 @@ function App() {
 
       <br />
 
-      <Grow in={showAlert}>
+      <Grow in={showAlert} mountOnEnter unmountOnExit>
         {alert}
       </Grow>
+
+      <Grow in={showInfo} mountOnEnter unmountOnExit>
+        {info}
+      </Grow>
     </>
   );
 }