next js 무한 렌더링 문제

import React, { useState } from "react";

const ToggleButtons = () => {
  const [buttonAActive, setButtonAActive] = useState(false);
  const [buttonBActive, setButtonBActive] = useState(false);

  const handleButtonClick = (button) => {
    if (button === "A") {
      setButtonAActive((prev) => !prev);
      setButtonBActive(false);
    } else if (button === "B") {
      setButtonBActive((prev) => !prev);
      setButtonAActive(false);
    }
  };

  return (
    <div>
      <button
        onClick={() => handleButtonClick("A")}
        style={{ backgroundColor: buttonAActive ? "green" : "white" }}
      >
        Button A
      </button>
      <button
        onClick={() => handleButtonClick("B")}
        style={{ backgroundColor: buttonBActive ? "red" : "white" }}
      >
        Button B
      </button>
    </div>
  );
};

next js로 버튼 A와 B가 있는데 A가 켜져있는 상태에서 B를 누르면  A가 꺼지고 B가 켜져있는 상태에서 A를 누르면 꺼지고 A가 켜져있는 상태에서 A를 또 누르면 꺼지고 B를 누른 상태에서 B를 또 누르면 꺼지는 버튼 2개를 만들고 있는데 이렇게 코드를 작성하니까 무한 렌더링이 걸리는데 해결 방법이 있을까요?