I have a React component of multiple plan Types and each plan type has either monthly or annual subscription. How can I select only one (monthly or annual) from only 1 plan at a time. I am creating the planTypes from an array of planTypes

import React, { useState } from "react";
import "./styles.css";
import Checkbox from "@material-ui/core/Checkbox";

export default function App() {
  const initialState = {
    Essentials: {
      monthly: false,
      annually: false
    },
    Pro: {
      monthly: false,
      annually: false
    },
    ProPlus: {
      monthly: false,
      annually: false
    }
  };

  const plans = [
    { planName: "free", cost: "$3" },
    { planName: "premium", cost: "$30" },
    { planName: "premiumPlus", cost: "$300" }
  ];

  const [checkboxVal, setCheckboxVal] = useState(initialState);
  const [selectedPlan, setSelectedPlan] = useState("");
  return (
    <div className="App">
      {plans.map((item, idx) => {
        console.log(item, "here");
        return (
          <div
            style={{
              width: "300px",
              height: "300px",
              border: "1px solid black"
            }}
          >
            <div>{item.planName}</div>
            <br />
            monthly
            <Checkbox
            // checked={}
            // onChange={}
            // name={`${item.planName}-monthly`}
            />
            <br />
            Annually
            <Checkbox
            // checked={}
            // onChange={}
            // name={`${item.planName}-annually`}
            />
          </div>
        );
      })}
    </div>
  );
}

demo link: https://codesandbox.io/s/goofy-diffie-suten?file=/src/App.js:0-1442