handle change data and update data in dashboard page for all tabs

components/dashboard/userAccount/detailUser/allergies/ItemAllergie.js

@@ -3,7 +3,7 @@ import TextLoading from "@/app/component/loading/Text";
 import { TableCell, TableRow } from "@mui/material";
 import ModalEditItem from "@/components/dashboard/userAccount/components/modal/ModalEditItem";
 import Content from "./modal/Content";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 function ItemAllergie({ row, idx, changeData }) {
   const contentData = {
@@ -11,9 +11,18 @@ function ItemAllergie({ row, idx, changeData }) {
     reaction: row.reaction,
     severity: row.severity,
   };
+
   const [data, setData] = useState(contentData);
   const resetData = () => setData(contentData);
 
+  useEffect(() => {
+    setData({
+      substance: row.substance,
+      reaction: row.reaction,
+      severity: row.severity,
+    });
+  }, [row]);
+
   return (
     <TableRow className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent">
       <TableCell