reactでクリックしたボタンのみの色が変わるようにしたいです

前提

reactで複数ボタンを設置し、クリック時に色が変わり、一つのみ選択できるような実装をしたいです。
material uiを使用しています。

実現したいこと

クリックしたボタンのみの色が変わるようにしたいです。

発生している問題・エラーメッセージ

現状リンク内容、classの切り替えで背景の色を変えているのですが、
どのボタンを押しても全てのボタンの色が変わってしまう状態です。

該当のソースコード

react

1const [active, setActive] = useState(false); 2 3const classToggle = (index: number) => { 4 setActive(!active) 5 } 6 7~省略~ 8<div className={s.answerItem}> 9 {(currentQuestion.choices)).map( 10 (choice, index) => ( 11 <Grid item className={classes.grid}> 12 <Button> 13 onClick={() => classToggle(index)} 14 style={active ? {background: "#3F50B5"} : {background"#bbb"}} 15 variant="outlined" 16 color="primary" 17 > 18 {index + 1 + ". " + currentQuestion.choices[choice]} 19 </Button> 20 </Grid> 21 ) 22 } 23</div> 24

試したこと

keyとしてindexを渡してみたりしましたが、変わらず全てのボタンが反応してしまいました。

補足情報（FW/ツールのバージョンなど）

どなたか思い当たる原因あるかた、ご教示いただけないでしょうか？
調べてもなかなかマッチする記事が見つからず途方に暮れております。
よろしくお願い致します。