checkBox once at the time in React - reactjs

Question

I am trying to select one checkbox at a time in order to setState with a specific value, the problem is that I am not sure if I need to loop over all the checkboxes and un-select the one that I didn't click.
in my case here I am using the value value="Fanny" | value="Abed" in order to identify which checkbox i cliciked
const [check, setcheck] = React.useState(false);
const [checkBoxValue, setCheckBoxValue] = React.useState(null);
const [info, setInfo] = React.useState(null);
React.useEffect(() => {
if (check && checkBoxValue === "Abed") {
setInfo("Abed");
} else if (check && checkBoxValue === "Fanny") {
setInfo("Fanny");
} else {
setInfo(null);
}
}, [check, checkBoxValue]);
return ( <label>
<input
value="Abed"
type="checkbox"
defaultChecked={check}
onChange={(e) => {
setcheck(!check);
setCheckBoxValue(e.target.attributes.value.value);
}}
/>
Abed!
</label>
<label>
<input
value="Fanny"
type="checkbox"
defaultChecked={check}
onChange={(e) => {
setcheck(!check);
setCheckBoxValue(e.target.attributes.value.value);
}}
/>
Fanny!
</label>
</div>
</>
)}
</div>
);

Answer 1

You're making this a lot more complicated than it needs to be. If only one checkbox should be checked, then ultimately that means you only have one value. Meaning you only need to keep track of that value. E.g.:
import { useState } from 'react';
export const Foo = () => {
const [checked, setChecked] = useState(null);
const toggle = evt => setChecked(current => current === evt.target.value ? null : evt.target.value);
return (
<>
<label>
<input
value="Abed"
type="checkbox"
checked={checked === 'Abed'}
onChange={toggle}
/>
Abed!
</label>
<label>
<input
value="Fanny"
type="checkbox"
checked={checked === 'Fanny'}
onChange={toggle}
/>
Fanny!
</label>
</>
);
};