how to toggle in react js? now i can click both

now, the sections are clicked both, but I want to click only one like a toggle how can..? if I must refactor all codes? but I don't have time ...T.T

enter image description here

here is my code that is designchoice function

function DesignChoiceButton(prop) {
  const { id, name, isToggle, designButton, setDesignButton } = prop;
  const [clicked, setClicked] = useState(isToggle);

  // 버튼 클릭 시 토글하여 색 변경, 섹션 컴포넌트 추가, 삭제
  const changeColor = () => setClicked(!clicked);

  const addDesign = (clickedTitle) => {
    const sortData = [...designButton, { id: id, name: clickedTitle }];
    sortData.sort((a, b) => a.id - b.id);
    setDesignButton(sortData);
  };

  const removeDesign = (clickedTitle) => {
    const deleteDesign = designButton.filter((el) => el.name !== clickedTitle);
    setDesignButton(deleteDesign);
  };

  const onChangeColor = (event) => {
    const check = designButton.filter(
      (el) => el.name === event.target.innerHTML,
    );

    changeColor();

    if (check.length !== 1) {
      addDesign(event.target.innerHTML);
    } else {
      removeDesign(event.target.innerHTML);
    }
  };

  return (
    <button
      type="button"
      id={id}
      onClick={onChangeColor}
      className={clicked ? 'DesignButton Toggle' : 'DesignButton'}
    >
      {name}
    </button>
  );
}