Estoy usando MUI y React para mostrar los accesorios (local, sorteo, visitante) como un ToggleButton que se puede seleccionar. Me gustaría tener solo una selección por fila. Los accesorios cambian cada semana, incluido el número de accesorios.

Por defecto, ToggleButtonGroup permite una selección para todos los aparatos.

Cambié el accesorio exclusive a false , que toma una matriz, pero luego el usuario puede seleccionar varios resultados por fila, que no es lo que estoy tratando de lograr.

¿Cómo puedo agregar lógica para que solo se pueda seleccionar un elemento por fila?

Nota : Los accesorios se devuelven desde una llamada a la base de datos. Agregué en la matriz de fixtures como un ejemplo de lo que se devuelve de la llamada a la base de datos.

 const [fixtures, SetFixtures] = useState([{ gameweek: "loading...", game: "loading...", home: "loading...", away: "loading...", draw: "loading...", kickoff_datetime: "loading...", result: "loading...", }]); const [alignment, setAlignment] = useState([]); const handleChange = (newAlignment) => { setAlignment(newAlignment); }; const fixtures = [ { game: "LeicesterArsenal", gameweek: 2, home: "Leicester", away: "Arsenal", draw:"LeicesterArsenalDraw", kickoff_datetime: "2022-07-15T15:30:00", result: null }, { game: "ManchesterUnitedNottinghamForest", game: 2, home: "Manchester United", away: "Nottingham Forest", draw:"ManchesterUnitedNottinghamForestDraw", kickoff_datetime: "2022-07-15T15:30:00", result: null }, { game: "TottenhamWestHam", game: 2, home: "Tottenham", away: "West Ham", draw:"TottenhamWestHamDraw", kickoff_datetime: "2022-07-15T15:30:00", result: null }, { game: "WolvesCrystalPalace", game: 2, home: "Wolves", away: "Crystal Palace", draw:"WolvesCrystalPalaceDraw", kickoff_datetime: "2022-07-15T15:30:00", result: null }] function RenderFixtures() { return fixtures.map((fixture, index) => <div id={"fixture-row-" + index} key={fixture.game}> <ToggleButtonGroup color="success" value={alignment} exclusive={true} onChange={handleChange} > <ToggleButton value={fixture.home}>{fixture.home}</ToggleButton> <ToggleButton value={fixture.draw}>Draw</ToggleButton> <ToggleButton value={fixture.away}>{fixture.away}</ToggleButton> </ToggleButtonGroup> </div>