[Component] 리액트 전환 스위치 컴포넌트

const Component = () => {
  const [genderMale, setGenderMale] = useState(null);
  const [genderFemale, setGenderFemale] = useState(null);

  ////////// 성별 변경(남자)
  const ChangeGenderMale = () => {
    setGenderFemale(false);
    setGenderMale((prev) => !prev);
  };

  ////////// 성별 변경(여자)
  const ChangeGenderFemale = () => {
    setGenderMale(false);
    setGenderFemale((prev) => !prev);
  };
  return (
    <>
      <GenderButton isActive={genderMale} onClick={ChangeGenderMale}>
        남자
      </GenderButton>
      <GenderButton isActive={genderFemale} onClick={ChangeGenderFemale}>
        여자
      </GenderButton>
    </>
  );
};
const GenderButton = styled.button`
  width: 150px;
  height: 30px;
  background-color: skyblue;
  border: 0px;
  opacity: ${(props) => (props.isActive ? 1 : 0.5)};
`;