how to create multiple checkbox groups with maximum 2 values in each group in react js

I want to create teams selection checkbox group wise. also user can only select 2 teams from each group. I am using react js 18.2v, I have tried some logic but how to get all values in one array / on single submit with validation, thanks in advance here is example https://codesandbox.io/s/group-checkbox-syr7ix?file=/src/data.js:0-2589

import { useEffect, useState } from "react";
const data = [
  {
    group: "A",
    teams: [
      {
        country: "Ecuador",
        country_code: "ECU",
        selected: false,
        admin_selected: true,
        points: 0
      },
      {
        country: "Netherlands",
        country_code: "NED",
        selected: false,
        admin_selected: false,
        points: 0
      },
      {
        country: "Qatar",
        country_code: "QAT",
        selected: false,
        admin_selected: false,
        points: 0
      }
    ]
  },
  {
    group: "B",
    teams: [
      {
        country: "IR Iran",
        country_code: "IRN",
        selected: false,
        admin_selected: false,
        points: 0
      },
      {
        country: "United States",
        country_code: "USA",
        selected: false,
        admin_selected: false,
        points: 0
      },
      {
        country: "England",
        country_code: "ENG",
        selected: false,
        admin_selected: false,
        points: 0
      }
    ]
  },
  {
    group: "C",
    teams: [
      {
        country: "Argentina",
        country_code: "ARG",
        selected: false,
        admin_selected: false,
        points: 0
      },
      {
        country: "Mexico",
        country_code: "MEX",
        selected: false,
        admin_selected: false,
        points: 0
      },
      {
        country: "Poland",
        country_code: "POL",
        selected: false,
        admin_selected: false,
        points: 0
      }
    ]
  }
];
export default function App() {
  const [allTeams, setAllTeams] = useState([]);
  const handleSubmit = (e) => {
    e.preventDefault();
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        {data.map((team, index) => {
          return (
            <SingleGroup
              key={index}
              data={team}
              setAllTeams={setAllTeams}
              allTeams={allTeams}
            />
          );
        })}
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

const SingleGroup = ({ data, setAllTeams, allTeams }) => {
  const [values, setValues] = useState([]);
  const handleChange = (e) => {
    if (e.target.checked) {
      if (values.length < 2) {
        setValues((prev) => [...prev, e.target.value]);
      } else {
        e.target.checked = false;
        alert("You can select only 2 countries from the given group");
      }
    } else {
      let newArr = values.filter((d) => d !== e.target.value);
      setValues(newArr);
    }
  };
  useEffect(() => {
    if (values.length === 2) {
      setAllTeams((prev) => [...prev, values]);
    }
  }, [values, setAllTeams]);

  return (
    <div>
      <h4>Group: {data.group}</h4>
      {data.teams.map((team, index) => {
        return (
          <label key={index}>
            <input
              type="checkbox"
              name={team.country_code}
              value={team.country_code}
              onChange={(e) => handleChange(e)}
            />
            {team.country}
          </label>
        );
      })}
    </div>
  );
};