Css react 样式的条件类名称设置

我正在try 用Reaction制作一个测验应用程序.

我目前在主测验页面上工作，其中我有4个按钮，每个按钮都表示我从题库导入的答案.

我希望突出显示当前选定的按钮，为此，我当前使用每个按钮的状态.有没有办法只使用一种状态并处理所有四个按钮，因为这种方法太繁琐，不能用于大量这样的按钮？另外，我只想要一个按钮，用户最后 Select 的那个按钮被突出显示.因此，我需要将所有其他按钮的状态设置为null，这会使任务更加单调乏味.

以下是包含按钮的div

<div>
  <button className={selected1} onClick={() => dealingWithOptions("A")}>{questions[currentQuestion].optionA}</button>
  <button className={selected2} onClick={() => dealingWithOptions("B")}>{questions[currentQuestion].optionB}</button>
  <button className={selected3} onClick={() => dealingWithOptions("C")}>{questions[currentQuestion].optionC}</button>
  <button className={selected4} onClick={() => dealingWithOptions("D")}>{questions[currentQuestion].optionD}</button>
</div>

以下是处理选项点击的函数

const [selected1,setSelectedButton1] = useState("")
const [selected2,setSelectedButton2] = useState("")
    
const dealingWithOptions = (op) => {
  setOptionChosen(op);
  if (op=="A") {
    setSelectedButton1("selected1"); 
    setSelectedButton2("")
    setSelectedButton3("")
    setSelectedButton4("")
  } else if (op=='B') {
    setSelectedButton1(""); 
    setSelectedButton2("selected2")
    setSelectedButton3("")
    setSelectedButton4("")    
  } else if (op=='C') {
    setSelectedButton1(""); 
    setSelectedButton2("")
    setSelectedButton3("selected3")
    setSelectedButton4("");
  }
  else if (op=='D') {
    setSelectedButton1("");
    setSelectedButton2("")
    setSelectedButton3("")
    setSelectedButton4("selected3");
  }
}