Tengo un componente React de varios tipos de planes y cada tipo de plan tiene una suscripción mensual o anual. ¿Cómo puedo seleccionar solo uno (mensual o anual) de solo 1 plan a la vez? Estoy creando los tipos de plan a partir de una matriz de tipos de plan.

 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> ); }

enlace de demostración: https://codesandbox.io/s/goofy-diffie-suten?file=/src/App.js:0-1442