Checkbox Group ReactJS issue

#react #usestate #checkbox

I'm a newbie of ReactJS, I was mess around with this function. Here I'm got 3 group of checkbox so I wanna when I checked/unchecked 1st box (2nd,3rd) of group checkbox then it's same effected like this :https://www.loom.com/share/35506f4234a649a9b98213dd0430bf9e

I'm so grateful with every idea which community give me, tks you all

export const Vertical: ComponentStory<typeof EdsFormCheckbox> = () => {
  const [isChecked, setChecked] = useState({checkOne:false,checkTwo: false,checkThree: false});
  const handleClick = (e: ChangeEvent<HTMLInputElement>) => setChecked(isChecked.checkOne);

return (

    onChange={handleClick}<br>
    name="standard"<br>
    labelText="Standard"<br>
    className="gap-300"<br>
  &gt;<br>
    <br>
    <br>
    <br>

  <EdsCheckboxGroup
    onChange={handleClick}
    name="required"
    labelText="Required"
    className="gap-300"
  >
    <EdsFormCheckbox checked={isChecked.checkOne} labelText="Math" isRequired></EdsFormCheckbox>
    <EdsFormCheckbox checked={isChecked.checkTwo} labelText="Science" isRequired></EdsFormCheckbox>
    <EdsFormCheckbox checked={isChecked.checkThree}  labelText="English" isRequired></EdsFormCheckbox>
  </EdsCheckboxGroup>

  <EdsCheckboxGroup
    onChange={handleClick}
    name="disable"
    labelText="Disable"
    className="gap-300"
  >
    <EdsFormCheckbox checked={isChecked.checkOne} labelText="Math" isDisabled></EdsFormCheckbox>
    <EdsFormCheckbox checked={isChecked.checkTwo} labelText="Science" isDisabled></EdsFormCheckbox>
    <EdsFormCheckbox checked={isChecked.checkThree} labelText="English" isDisabled></EdsFormCheckbox>
  </EdsCheckboxGroup>