handle just one item is active

app/component/SwitchTable.js

@@ -1,7 +1,7 @@
 import { FormControlLabel, FormGroup, Switch } from "@mui/material";
 import { styled } from "@mui/material/styles";
 
-const MaterialUISwitch = styled(Switch)(({ theme }) => ({
+const MaterialUISwitch = styled(Switch)(() => ({
   width: 63,
   height: 38,
   padding: 7,
@@ -48,11 +48,17 @@ const MaterialUISwitch = styled(Switch)(({ theme }) => ({
   },
 }));
 
-function SwitchTable({ value }) {
+function SwitchTable({ value, id, changeStatus }) {
   return (
     <FormGroup className="custom-switch">
       <FormControlLabel
-        control={<MaterialUISwitch defaultChecked={value} sx={{ m: 1 }} />}
+        control={
+          <MaterialUISwitch
+            sx={{ m: 1 }}
+            checked={value}
+            onChange={(e) => changeStatus(e.target.checked, id)}
+          />
+        }
       />
     </FormGroup>
   );