select only one check per row

src/Components/Test/Cleaver/Question.jsx

@@ -1,15 +1,10 @@
 import * as React from 'react';
 
-import { 
-  Remove as RemoveIcon,
-  Add as AddIcon
-} from '@mui/icons-material';
-
+import { Remove as RemoveIcon, Add as AddIcon } from '@mui/icons-material';
 import {
   Card,CardContent,Avatar,Checkbox,List,Tooltip,
   ListItem,ListItemButton,ListItemIcon,ListItemText
 } from '@mui/material'
-
 import { deepPurple } from '@mui/material/colors';
 
 function CheckboxexHeader(prop) {
@@ -33,51 +28,68 @@ function CheckboxexHeader(prop) {
 
 function CheckboxesGroup(props) {
 
-  const [checked, setChecked] = React.useState([0]);
+  const [checkA, setCheckA] = React.useState(0);
+  const [checkB, setCheckB] = React.useState(0);
 
-  const handleToggle = (value) => () => {
 
-    const currentIndex = checked.indexOf(value);
-    const newChecked = [...checked];
-    if (currentIndex === -1) {
-      newChecked.push(value);
-    } else {
-      newChecked.splice(currentIndex, 1);
+  const changeA = (event) => {
+    let { id } = event.target
+    if(parseInt( checkB ) !== parseInt(id) ){
+      setCheckA(parseInt( id ))
+    }
+  };
+  
+  const changeB = (event) => {
+    let { id } = event.target
+    if(parseInt( checkA ) !== parseInt( id )){
+      setCheckB(parseInt( id ))
     }
-
-    setChecked(newChecked);
   };
 
   return (
     <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
+
       {props.quiz.map((value) => {
+
         const labelId = `checkbox-list-label-${value.id}`;
+
         return (
           <ListItem key={value.id}>
-            <ListItemButton role={undefined} onClick={handleToggle(value)} dense>
+            <ListItemButton dense>
               <Tooltip title={value.decription} placement="top-start" arrow>
                 <ListItemText 
-                  sx={{ '& .MuiTypography-root' : {
+                  sx={{ 
+                    '& .MuiTypography-root' : {
                       fontWeight:'bold'
-                  }}} className="checkbox_label_question" id={labelId} primary={value.nombre} />
+                  }}} 
+                  className="checkbox_label_question" 
+                  id={labelId} 
+                  primary={value.nombre} 
+                 />
               </Tooltip>
 
               <ListItemIcon>
                 <Checkbox
+                  id={value.id.toString()}
+                  sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
+                  color="error"
                   edge="start"
-                  checked={checked.indexOf(value) !== -1}
-                  tabIndex={-1}
                   disableRipple
-                  inputProps={{ 'aria-labelledby': labelId }}
+                  inputProps={{ 'aria-labelledby': value.id }}
+                  checked={parseInt( checkA ) === parseInt( value.id )}
+                  onChange={changeA}
                 />
               </ListItemIcon>
               <ListItemIcon>
                 <Checkbox
+                  id={value.id.toString()}
+                  sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
+                  color="error"
                   edge="start"
-                  //checked={}
-                  tabIndex={-1}
                   disableRipple
-                  inputProps={{ 'aria-labelledby': labelId }}
+                  inputProps={{ 'aria-labelledby': value.id }}
+                  checked={parseInt( checkB ) === parseInt( value.id )}
+                  onChange={changeB}
                 />
               </ListItemIcon>
             </ListItemButton>
@@ -88,7 +100,7 @@ function CheckboxesGroup(props) {
   );
 }
 
-export function Question({ quiz}) {
+export function Question({quiz}) {
   let { instrucciondepregunta, respuestas,id } = quiz
   return (
     <Card sx={{ minWidth: 275, margin: '30px !important', borderLeft: '5px solid var(--main)'}}>