Main checkbox selecting all cards when checked

I am building a component where I am grouping cards by regions. I have a checkbox by the region name and when its checked I want to be able to select all the cards in the region.

This is how my cards are displayed by region:

  <div className="pl-14 text-black font-nunito mt-8 ml-3 text-2xl">
    {_.map(_.keysIn(groups), (region) => {
      return (
        <>
          <div className="flex justify-between">
            <div className="flex">
              <Checkbox
                className="bg-transparent shadow-none text-black hover:bg-transparent"
                color="primary"
              />
              <p className="mt-1">{_.capitalize(region)}</p>
            </div>
            <div className="pr-16">
              <Button variant="text" className="text-lightBlue">
                View More
              </Button>
            </div>
          </div>
          <UserCards groupedUser={groups[region]} />
        </>
      );
    })}
  </div>

And my cards look like this:

 const UserCards = ({ groupedUser }) => {
    return groupedUser.map((user) => (
      <div className="cardContainer">
        <div className="card shadow-customShadow">
          <Checkbox
            key={user.email}
            className="bg-transparent shadow-none text-black mb-14 hover:bg-transparent"
            color="primary"
            onChange={(event) => {
              if (event.target.checked) {
                const data = [...userEmails];
                data.push(user.email);
                setUserEmails(data);
              } else {
                const data = [...userEmails];
                const index = data.indexOf(user.email);
                data.splice(index, 1);
                setUserEmails(data);
              }
            }}
            checked={_.includes(userEmails, user.email)}
          />
          <div>
            <div className="mt-2 text-lg">
             {information stored here}
            </div>
            <div className="mt-2 text-lg">
              {information stored here}
            </div>
          </div>
        </div>
      </div>
    ));
  };

How can I tell the region check box to check all the cards?